ReactJS
ReactJS well known JavaScript library to build User Interfaces, which was created by Facebook. ReactJS is used to build Single page Applications.
Current Version is 16.13.1
How Does ReactJS Work?
Reactjs create a virtual DOM, which makes ReactJs unique.Instead of manipulating the browser’s DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.
ReactJS creates Virtual DOM and Exact Copy of Real DOM.
ReactJS only changes what we need to change. Then ReactJs checks with the actual copy of the Real Dom. Then it got to know there is a difference between Virtual and the copy exact of DOM, So ReactJS updates only that particular component with the Real DOM.
Advantages of Virtual DOM
1.Greater Performance
- Updating the Virtual DOM in React.js always increases the performance.
2.Efficiency –
- React’s Virtual DOM provides a more efficient way of updating the view in a web application. Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created. Rendering the Virtual DOM is always faster than rendering the UI in the actual browser DOM.
Let’s Quickly see the ReactJS LifeCycles
What is LifeCycle?
When our page is loaded into browser. There are some stages as intialization,rendered and destroyed.The three stages are:
Mounting, Updating, and Unmounting.
I .Mounting:
Mounting means Putting element into DOM.
These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
(By clicking above methods, you can see more in reactjs.org)
- Constructor
Constructor is called before mounted.This can be used to bind event handlers to the component and/or to initialize the component’s local state. We need to call super(props) before this.props
because it will throw errors if you don’t call super(props)before this.props. Never call setState() inside the constructor.
2. static getDerivedStateFromProps()
getDerivedStateFromProps is one of those newly introduced lifecycle method replacing componentWillReceiveProps.
3. render()
The render() method is required, and is the method that actual outputs HTML to the DOM.
4. componentDidMount()
After render, componentDidMount() is called.This is where you run statements that requires that the component is already placed in the DOM.
II. Updating
Whenever there is change in state or props, component needed to be updated. That phase is called as Updating. In here we have,
1.getDerivedStateFromProps()
As in mounting, in updatation also we call getDerivedStateFromProps().The first method called after we updated.This is a natural place to set the state object based on intial props.
2. shouldComponentUpdate()
In the shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not. Defaultly value is True
3.render()
Render is called when update completes.
4.getSnapshotBeforeUpdate()
Access the state and props before the update,meaning that even after the update, you can check the values before update
5.componentDidUpdate()
The componentDidUpdate method is called after the component is updated in the DOM.
3. Unmounting
The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()
This method is called when a component is being removed from the DOM:
