react-life cycle

Every living creature has its own life cycle, from birth, adolescence, adulthood, to death. Similarly, a component has its specific life cycle, and react describes its entire life cycle in different ways.

The following is a structure that defines a react component:

Import React, {Component} from ' React ';

Class Test extends Component {
    Constructor (props, context) {
        Super (props, context)
        this.state = {
            // Define state
        }
    }
    Componentwillmount () {}
    Componentdidmount () {}
    Componentwillreceiveprops ( Nextprops) {}
    shouldcomponentupdate (Nextprops, nextstate) {}
    componentwillupdate (Nextprops, nextState) {}
    componentdidupdate (Prevprops, prevstate) {}
    render () {
        return (
            <div></div>
    }
    Componentwillunmount () {}
}
export default Demo;

The following is an explanation of each life cycle:

Life cycle

1) Getdefaultprops: Before loading, the data assigned in the component will be set to This.props;

2) Getinitialstate: The return value of this function will be set to This.state before the call is loaded. In the writing of ES6, just write in constructor;

  Class Demo extends Component {
        Constructor (props, context) {//As long as the component exists constructor, you must write super, otherwise this point will be wrong
            super (props, context)
            This.state = {
                //define state
            }
        }
  }     

3) Componentwillmount: Called before render, you can do some preparatory work before rendering (usually used on the server);

4) Componentdidmount: The first rendering of the component is completed, the DOM node has been generated, you can call the AJAX request here, return the data setstate after the component will be re-rendered;

5) Componentwillreceiveprops: After accepting the parent component changed props needs to re-render the component to use more, it receives a nextprops parameter, By comparing Nextprops and This.props, the Nextprops SetState is set to the current state to render the component again;

6) Shouldcomponentupdate: Called before re-render, returns a Boolean value that is false to block the update of the component; Note: Because the React parent component re-renders causes all its subcomponents to be re-rendered, At this point we may not need the left and right subcomponents to be re-rendered, so we need to make a judgment in the sub-component's life cycle;

7) Componentwillupdate: Before the render call, you can render some preparatory work, and when Shouldcomponentupdate returns True, the component enters the process of re-rendering;

8) The Render:render function inserts the DOM structure generated by the JSX, react generates a copy of the virtual Dom tree, and at each component update, this react compares the old and new Dom trees before and after the update by their diff algorithm, and, after comparison, finds the smallest, differentiated DOM node. And will be re-rendered;

9) Componentdidupdate: Immediately after the component update is called, you can get the props and state before the update;

Componentwillunmount: Component unloading, can do some cleanup work. such as: SetTimeout, setinterval in the clear assembly, removing the listener RemoveEventListener in the component