First of all React is one of the best javascript framework. It gives the best-rendering performance, clean code, rich user interface, etc. React build single-page applications. Now lets learn some react topics.
PropTypes: propTypes means in the component we can write what type of props is this. As a data type is a string, number, boolean, or anything we can pass these props types.
What is the difference between State-props:
Props only send the value. It is read-only. can not change the value by props. And we can send anything like hardcoded value, dynamic value, object, function.
State
Props
State can get initial value from parent component
Props also can get initial values from the parent component.
State can not change by parent component
Props can be changed by parent component
State can set default value in the component.
Props also can set default values in components.
State cab change inside the component
Props can not be changed inside component.
State can not be changed in child component
Props can be changed in the child component.
Explain the Component Lifecycle.
=> Lifecycle method happened three ways
Mounting: In mounting, we maintain some order. These are
contractor()
Static getDerivedStateFromPorps()
render()
componentDivMount()
Updating: In updating also maintain some orders. there are
Static getDerivedStateFromPorps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDivUpdate()
Unmounting: when the component deletes from the DOM. Then it is called
componentWllUnmount()
What is hooks in react? Hooks is create a connection with our application to react. We use some hooks: useState: this hook is used to update any value. if anything changes or needs to update In the application useState hooks can update this. useEffect: by this hook, we can load data or fetch data in UI. it’s also like an impure function.if Loaded data is not loaded from the server it can not be rendered.
There are more hooks like this that are building a connection with code and rendering in UI.
Virtual DOM and diffing- algorithm? Virtual DOM: virtual DOM is most like real DOM.in real DOM we trigger any element by methods like getElementById or getElementByClassName and then change the code. Sometimes if needed to change somewhere then all structures should be changed this was very time-consuming and most difficult. But now VIrtual DOM is made our life easier. In virtual DOM initially set a DOM. when we change code then automatically create a new DOM and compare the previous DOM and then update the DOM.this this is created a Tree which is rendered from the root and his parent is app.js. All component is stored in app.js and finally rendered in UI by root. This tree most looks like real DOM. All processes are happened by diff algorithms. It means when anything changes in code then it is compared with virtual DOM and then they create a Diff algorithm. and then reference change or update in UI.
Top comments (0)