Prop Types
prop types is a mechanism to ensure that components use the right data type and also pass the right data, and also components use the right type of props. Actually it is used to validate the structure of props passed into react components.
We know that in statically typed language, the validation is done by the compiler at compile time, but JavaScript is not that.so this was a necessary tool to help debug obtuse runtime errors.
State-props
props are used to pass data, other hand state is used for managing data. When we pass data by props, it cannot be modified by a component that is receiving the outside. But state data can be modified by its own component ,it is private .cannot be accessed from the outside.
We can passed state as prop the other components. For example is that
State and props both hold information but they different their functionally ,their structure.
JSX
jsx stands for JavaScript XML,It allows to write html in react.it also make it easier to write html in react.it is the syntax extension of a JavaScript. When using jsx to react that describes that the UI should look like, without jsx we should be used separating technologies by putting markup and logic in separate files, but with jsx we have to be used component that are combined of markup and JavaScript logic
For example is that:
const element = (
Hello, world!
);
## **_Component Lifecycle_**
in this article we describes the component life cycle of a react, being human we know that everything's has a life cycle, same as that component has also life cycle ,it has to be created, updated and then die. Component life Cycle method has broadly four parts like:
In this phase, the component is going to be start its journey setting up his state and the props. Its actually done by the constructor method, after completed the initialization phase, that is called mounting, in this method the components render first time , where dom manipulation are occurred, there are two type in this phase like:
1.componentWillMount’()
2.componenetDidMount()
Then when state are change by user event like clicking, typing etc. ,the component re render once ,it called updating ,its three part like:
1.shouldComponenetUpdate()
2.componenetWillUpdate()
3.componenetDidUpdate()
The last part is unmounting.in this phase the component unmounting from the Dom
Hooks
The React hook is the new features of the React 16.8 version.it allow to use state and other features without writing class. Hooks are the function which are used React state and lifecycle features from functional components.
When we using function components, then we want to add some state in it, previously we have to used class ,but now comes hook, we used hook the functional components, React hook are similar the JavaScript function, but that it follow two rules, when using it,
1.only call hooks at the top level
2.only call hook from react function
Hook effect:
The Effect Hook allows us to perform side effects (an action) in the function components. It does not use components lifecycle methods which are available in class components. In other words, Effects Hooks are equivalent to componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.
Side effects have common features which the most web applications need to perform, such as:
Updating the DOM,
Fetching and consuming data from a server API,
Setting up a subscription, etc.
Hook state: hook state is the new wat a declaring a state.it uses the use keyword like useState. state become stateless but when we using UseState then state is stateful after re-rendering
Custom hooks
A custom Hook is a JavaScript function. The name of custom Hook starts with "use" which can call other Hooks. A custom Hook is just like a regular function, and the word "use" in the beginning tells that this function follows the rules of Hooks. Building custom Hooks allows you to extract component logic into reusable functions.
There are some built in hooks like:
Basic hooks:
1,useEffect
2.useState
3.UseContext
There are some additional hooks like:
1.useReducer
2.useCallback
3.useRef()
Context API
the context Api is the way to produce global variable in a react app that passed the around. Its the alternative way of props drilling that is passed data to parent to child component almost any changes any component data. But context Api is the centralism the we are used pass data or access data any time without pass grandparent to parent to child
- Virtual DOM and diffing- algorithm Ans: Virtual Dom is a just copy of the real Dom, virtual Dom and real has same properties but it lacks the power to directly change the content of the screen that has ability the virtual Dom
For example when we use any blog website, many time ae are comment the blogsite , when any user modifies a comment then the whole Dom (UI) needs to repainted because of that one little change. There is a big problem ,the solution is that virtual Dom ,that is the power of directly change the content of the screen without repainted
Top comments (0)