react的钩子函数

react的钩子函数

挂载阶段的四个钩子
constructor -> getDerivedStateFromProps(props,state) -> render -> componentDidMount
1、构造函数，在创建组件的时候调用一次。
        constructor(props,context){}

2、在组件即将渲染时触发，可以在此修改组件状态
        componentWillMount

3、render渲染组件

4、组件渲染结束时触发，可以在此请求服务器数据。
        componentDidMount

5、在props参数发生改变时触发。
        componentWillReceiveProps

6、会在state参数发生改变时触发，当成功发生改变会触发
        shouldComponentUpdate
    然后重新渲染组件
        componentWillUpdate

7、组件卸载时触发(卸载阶段的钩子函数)
        componentWillUnmount



更新阶段的钩子函数
1、static getDerivedStateFromProps(props,state)
(更新阶段的钩子函数)

2、shouldComponentUpdate(nextProps,nextState){}
    返回true 则更新渲染
    返回false 则不渲染
存组件(进行浅比对，进行性能的优化)
    pureComponent 
无状态组件进行渲染优化
    React.memo()

3、render(){}

4、getSnapeShotBeforeUpdate(prevprops,prevState){
    return 100 (100这个值，返回给componentDidMount的第三个参数)
}
5、监听数据变化
componentDidUpdate(prevProps,prevState,snapShot){
        console.log(snapShot)
    }



卸载阶段的钩子函数
componentWillUnmount(){}

​