First, the component mount stage
1. componentWillMount()
The rendering method before the first call to mount component in a process of unloading, only this time to perform. Within this function may initialize the state of work, with similar effect constructor. Here is the method state last modified before render method call.
Here it is not recommended to use Ajax interface data acquisition, because it is asynchronous, so the next in the first render not receive any response data.
willMount in setState still one more rendering
2. render()
This method creates a virtual dom, represents the output component. (Output can be applied to react-dom, react-native)
3.componentDidMount()
When the method is called, it has indicated that render real dom, any node can be obtained in this method.
Second, the component updates stage
2.1 parent component state change, triggered sub-component update (it simply is to get to a new props)
2.1.1 componentWillReceiveProps(nextProps)
When the parent props or component state changes, the method is called subassembly. Here nextProps and this.props we need to judge for themselves whether or not to make the same corresponding operation. For example, according to the new props to setState
2.1.2 shouldComponentUpdate(nextProps, nextState)
When some props or change state determining component does not require re-rendering, it can be returned by this method to prevent false rendering.
2.1.3 componentWillUpdate(nextProps, nextState)
When components get new props or state, this function is called before the render. (Do not update the state in this method)
If you need to change the respective props can be made in response to the operation of componentWillReceiveProps
2.1.4 render
2.1.5 componentDidUpdate(prevProps, prevState)
Can operate on dom updated
2.2 assembly updates the internal state
Less componentWillMount, consistent with the other above
Third, uninstall
componentWillUnmount()
Clear timers, network requests, etc.
Quote: https://moeover.com/2017/01/17/understand-react-lifecycle.html