The hook function that the react component will trigger when it is initialized
1、getDefaultProps()
Set the default props, you can also use dufaultProps to set the default properties of the component.
2 、getInitialState ()
There is no such hook function when using the class syntax of es6, you can directly define this.state in the constructor. This.props can be accessed at this time.
3、componentWillMount()
It is only called when the component is initialized. It is not called when the component is updated later. It is only called once in the entire life cycle. At this time, the state can be modified.
4、 render()
The most important steps of react, creating virtual dom, performing diff algorithm, and updating dom tree are all performed here. The state cannot be changed at this time.
5、componentDidMount()
Called after the component is rendered, you can get and manipulate the dom node through this.getDOMNode(), and call it only once.
Five hook functions are also triggered during the update:
6、componentWillReceivePorps(nextProps)
Not called when the component is initialized, but called when the component accepts new props.
7、shouldComponentUpdate(nextProps, nextState)
React performance optimization is a very important part. Called when the component accepts new state or props. We can set whether the two props and state are the same before and after the comparison. If they are the same, return false to prevent the update, because the same property state will definitely generate the same dom tree, so there is no need Create a new dom tree and compare the old dom tree with the diff algorithm to save a lot of performance, especially when the dom structure is complex. But calling this.forceUpdate will skip this step.
8、componentWillUpdate(nextProps, nextState)
It is not called when the component is initialized, it is only called when the component is about to be updated, and the state can be modified at this time
9、render()
There is
10、componentDidUpdate()
It is not called when the component is initialized. It is called after the component is updated. At this time, the dom node can be obtained.
There is also an uninstall hook function
11、componentWillUnmount()
Called when the component is about to be uninstalled, some event listeners and timers need to be cleared at this time.