Summarize the React lifecycle

Constructor and Render do not count their lifecyles and are grouped together to better display the loading order of the application.

One, the old life cycle

    // The initialization phase is triggered by react.render, -- the first render
    1,constructor(props) 2,componentWillMount() 3,render() 4.componentDidMount(The update phase is internal to the componentthis.setDateOr the parent componentrenderTrigger 1,componentWillReceiveProps() 2,shouldComponentUpdate() 3,componentWillUpdate() 4.render() 5,componentDidUpdate() // The unload phase is made byReactDOM.unmountComponentAtNode() Trigger 1.componentWillUnmount() // Usually do the last thingCopy the code

Two, new compatible

Remove 3 hooks, new version needs to add UNSAFE_

    componentWillMount
    componentWillReceiveProps
    componentWillUpdate
Copy the code

3. New life cycle

    // Initialization phase: triggered by reactdom.render () -- the first render
    1,constructor() constructor 2.getDerivedStateFromProps            stateThe value of at any time depends onprops3,render() 4.componentDidMount() // Update phase: by component internalthis.setSate() or parent component rerenderTrigger 1,getDerivedStateFromProps2,shouldComponentUpdate(Control module update "valve" 3,render() 4.getSnapshotBeforeUpdateGet a snapshot before update 5.componentDidUpdate(preprops,prestate,napshotValue) component update hook // uninstall component: byReactDOM.unmountComponentAtNode() Trigger 1.componentWillUnmount() component to uninstallCopy the code

Four, add two new life cycle explanation (official website says that basic use)

    static getDerivedStateFromProps(props){
        return props || null} returns a state object ornullThe value of state depends on props any time the component is passed in!Copy the code

    getSnapshotBeforeUpdate(){
        returnAny} Returns snapshot value ornullDom before rendering, capture the information from the dom, the return value passed as a parameter to componentDidUpdate componentDidUpdate (preprops prestate, napshotValue)Copy the code

Five, commonly used life cycle

    render
    componentDidMount
    componentWillUnmount
Copy the code