React life cycle

• Initialization

1, Getdefaultprops ()

Set the default props, or you can set the default properties of the component with Dufaultprops.

2, Getinitialstate ()

There is no such hook function when using the class syntax of ES6, you can define this.state directly in the constructor. You can now access the This.props

3, Componentwillmount ()

Only called when the component is initialized, the component updates are not called at a later time, and the entire life cycle is called only once, and the state can be modified.

4. Render ()

React the most important steps, create a virtual DOM, perform a diff algorithm, and update the DOM tree here. You cannot change the state at this time.

5, Componentdidmount ()

Called after the component is rendered, and is called only once.

• Update

6, Componentwillreceiveprops (nextprops)

Called when component initialization is not called when the component accepts a new props.

7, Shouldcomponentupdate (Nextprops, Nextstate)

React is a very important part of performance optimization. When a component accepts a new state or props, we can set whether two props and states are the same before and after this comparison, and if the same, return false to prevent updates, because the same property status will certainly generate the same DOM tree, This makes it unnecessary to create new dom trees and old dom trees to compare diff algorithms, saving a lot of performance, especially when the DOM structure is complex

8, Componentwillupdata (Nextprops, Nextstate)

The component is not called when it is initialized and is called only when the component is about to be updated, and the state can be modified at this time

9. Render ()

Component rendering

10, Componentdidupdate ()

When the component is initialized, it is called when the component Update is complete and the DOM node can be obtained.

• Unloading

11, Componentwillunmount ()

The component will be called when it is unloaded, and some event listeners and timers need to be cleared at this time.

Here I start from the constructor constructor, from the parameters, functions, usage of all aspects of summary 1, constructor

The constructor parameter accepts two parameters Props,context
You can get the props,context passed down to the parent component, if you want to use props or context within the constructor Constructor (note that inside the component, where it can be directly received elsewhere) , you need to pass in, And pass in the Super object.

Constructor(props,context) {
   Super(props,context)
   Console.log(this.props,this.context) // can use props and context internally
} 

Of course, if you only need to use the props or context within the constructor, then just pass in a parameter, if not, it will not be passed.

About ES6 's class constructor and super

As long as the component exists constructor, it is necessary to write super, otherwise this point will be wrong

Constructor() {
   Console.log(this) // error, this points to error
} 

2. Componentwillmount components will be mounted

1, the component has just experienced constructor, the initial completion of data
2, the component has not yet entered render, the component has not been rendered complete, the DOM has not been rendered

Componentwillmount generally use less, more is used in the service side rendering, (I have not used the react service side rendering ha, so also can not write a lot)
But there's a problem here.

Can AJAX requests be written in Willmount?
: The answer is no, don't write it like that.

1. While there are some situations where error is not possible, if the data that the AJAX request comes in is empty, it will affect the rendering of the page, and you may see a blank.
2. Not good for server-side rendering, in the case of isomorphism, the life cycle will go to Componentwillmount, so using Ajax will make mistakes

3. Componentdidmount Component Rendering complete

The first render of the component is completed, and the DOM node has been generated, where the AJAX request can be called, and the component will be re-rendered after the data setstate is returned.

4.componentWillReceiveProps (Nextprops)

Componentwillreceiveprops the number of props needed to re-render the component after accepting that the parent component has changed
It takes a parameter

1.nextProps
Re-render the component by comparing the Nextprops SetState to the state of the current component by contrasting nextprops and this.props

componentWillReceiveProps (nextProps) {
    nextProps.openNotice !== this.props.openNotice && this.setState({
        openNotice:nextProps.openNotice
    }，() => {
      console.log(this.state.openNotice:nextProps) //将state更新为nextProps,在setState的第二个参数（回调）可以打印出新的state
  })
}

about setstate usage and in-depth understanding a post will be devoted to an article5.shouldComponentUpdate (Nextprops,nextstate)

The only control is the life cycle of component re-rendering, because in react, after SetState, the state changes, the component will enter the process of re-rendering, (temporarily so understand, in fact, some cases will not be re-rendered after setstate, such as the array reference does not change ) return false here to prevent updates to the component

Because the re-rendering of the react parent component causes all of its subcomponents to be re-rendered, we do not need all subcomponents to be re-rendered at this time, so we need to make a judgment in the child component's life cycle.

For react beginners, there may be fewer opportunities involved in this life cycle, but if your project starts to focus on performance optimization, as you love and deepen your react, you will use this lifecycle

6.componentWillUpdate (Nextprops,nextstate)

Shouldcomponentupdate returns True, the component enters the re-rendered process and enters componentwillupdate, where it can also get nextprops and nextstate

7.render function

The 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 later finds the smallest, differentiated DOM node . and re-render

The render function in React16 allows the return of an array, a single string, etc., not limited to a top-level DOM node, can reduce a lot of unnecessary div (of course, pay attention to upgrade your react version, the existing project to React16 does not appear any bug, The only thing to note is protypes type detection changed name ~)

Meaning you can do this now:

render () { return " "

}
or this:

render () { return [ <div></div> <div></div>

]
}

8, Componentdidupdate (prevprops,prevstate)

After the component is updated, react will enter Componentdidmount only after the first initialization succeeds, and then each time it is re-rendered, it will get to Prevprops and Prevstate, the props and state before the update.
If you understand the process of component re-rendering, you should understand that the following 5 printed state should be the same. (About SetState Async is the understanding of synchronization, and will also be an article to be sorted later ~)

componentWillReceiveProps (nextProps,nextState) { this.setState({ fengfeng:nextProps.fengfeng
    },()=>{ console.log(this.state.fengfeng) //1
    })
    
}
shouldComponentUpdate (nextProps,nextState) { console.log(nextState.fengfeng) //2
}
componentWillUpdate (nextProps,nextState) { console.log(nextState.fengfeng) //3
}
componentDidUpdate (prevProps,prevState) { console.log(this.state.fengfeng) //5
}
render () { console.log(this.state.fengfeng) //4 return ( <div></div>
    )
}

9, Componentwillunmount ()

Componentwillunmount is also often used in a life cycle, beginners may use less, but with good this is really important OH

1.clear all the settimeout,setinterval you have in the formation
2. Remove all monitoring RemoveEventListener in the build
3. Perhaps you will often encounter this warning:

 
Can only update a mounted or mounting component. This usually means you called setState() on an       
 unmounted component. This is a no-op. Please check the code for the undefined component.

Because you are setstate in the AJAX request return in the build, and your component is destroyed, the request is not completed, so it will be reported warning
The solution is

componentDidMount() { this.isMount === true
    axios.post().then((res) => { this.isMount && this.setState({ // 增加条件ismount为true时
      aaa:res
    })
})
}
componentWillUnmount() { this.isMount === false
}

Expand:

1.react Life Cycle Parent-child component render order
Parent-child component, is the Componentwillmount life cycle first going into parents or subcomponents?
Where's componentdidmount?

Evan_zhan
Links: https://www.jianshu.com/p/c9bc994933d5
Source: Pinterest
The copyright of the book is owned by the author, and any form of reprint should be contacted by the author for authorization and attribution.

React life cycle