Brief analysis on the life cycle of react components (code parsing)

This article brings the content is about the analysis of react components of the life cycle (code analysis), there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

The entire React life cycle has 3 stages: Create, update, unload, each phase has corresponding work and method, we can look at the following classic diagram study:

First Stage

This is the stage of virtual DOM creation, which executes 5 methods in turn, and in addition to the Render method, the remaining four methods are called 1 times throughout the life cycle, and must be called 1 times:

• Getdefaultprops ()

This method is executed before the component instance is created, that is, before the constructor executes, getting the parameters from the parent component, where you can edit the parameters and return the new parameters as props

• Getinitalstate ()

At the beginning of the component creation, this method is called to initialize the state of the component

• Componentwillmount ()

This method is executed before the component render, and can be used to modify the state. React Call this function of the parent component before calling this function of the child component

• Render ()

Begins a component render function, returning a virtual DOM with only one root node. The state of the modified component cannot be synchronized in this function.

• Componentdidmount ()

After render rendering, the notification component has been loaded to completion. React calls this function of the subassembly before calling the parent component. Starting with this function, the component can interact with other frameworks. such as setting a timer or initiating a network request.

Phase II

At this point the component has entered a stable run phase, which can handle user interaction or receive an event update interface. The following methods can be executed many times throughout the life cycle, or they can be executed at once.

• Componentwillreceiveprops ()

The function of the child component is called when the corresponding parameter in the parent container changes. The new props will be passed in as parameters, and the old props can be obtained according to This.props. We can do some processing of the state in this function. and updating state in this function does not occur two times.

• Shouldcomponentupdate ()

The function passes over two parameters, a new state and a new props. Changes to state and props are transferred to the function. This function mainly Nextprops and nextstate to pass over to the judgment. If it returns true, the rendering is re-rendered (by default, true), and if False is returned, it is not re-rendered. Under certain conditions, we can improve efficiency by selecting updates or not updating according to the props and state passed over.

• Componentwillupdate ()

Similar to the Componentwillmount method, called before render rendering. A new props or state is received on the component. After this function is called, Nextprops and Nextstate are set to This.props and This.state respectively.

• Componentdidupdate ()

Similar to the Componentdidmount method, called after render rendering, the function is called after the real DOM is generated. The arguments passed are the previous props and state.

Phase III

This is the stage of extinction, mainly for the work of memory cleanup and release. There is only one method for this phase, which is called and called only once throughout the life cycle.

• Componentwillunmount ()

Componentwillunmount is called when the component is to be removed from the interface. Here are some of the related destruction operations, such as the undo timer, event monitoring and so on.

Several situations that trigger render

Here we only consider that Shouldcomponentupdate is not modified and always returns True

• First render, i.e. Initial render

• Call This.setstate (not every call to SetState will be triggered, react will be optimized, such as the input component of ANTD)

• The parent component is updated, usually the props of the modified subassembly

• If the parent component triggers render, the subassembly will of course trigger the render

• Call This.forceupdate ()

A simple example

Import React from ' React ', import reactdom from ' react-dom ', import style from './font.css '; Import './index.less '; class Par    ENT extends react.component{Constructor (props) {super (props);  This.state = {willrender:true, prop:1}; } render () {return (<div> <button onclick={() =>{this.setstate ({prop:10})}}>changepropsfro mparent</button> {this.state.willRender && <child fromparent={this.state.prop}/      >} <button onclick={() =>{this.setstate ({willrender:false})}}>unmountchild</button>  </div>);    }}class Child extends React.component {constructor (props) {super (props);  This.state = {curr:0};  } getdefaultprops () {console.log (' getdefaultprops ');}  Getinitalstate () {console.log (' getinitalstate ');  } componentwillmount () {console.log (' componentwillmount ');  } componentdidmount () {console.log (' componentdidmount '); } ComponeNtwillreceiveprops () {console.log (' componentwillreceiveprops ');    } shouldcomponentupdate () {console.log (' shouldcomponentupdate ');  return true;  } componentwillupdate () {console.log (' componentwillupdate ');  } componentdidupdate () {console.log (' componentdidupdate ');  } componentwillunmount () {console.log (' componentwillunmount '); } render () {Console.log (' render ') return (<div> <button onclick={() =>this.setstate ({curr: 2})}>setstate</button> <button onclick={() =>{this.forceupdate ();}  >forceUpdate</button> </div>); }}reactdom.render (<parent/>, document.getElementById (' root '));