React的声明周期

React声明周期（16.3版本以前）

分为3个阶段：

1. 加载阶段

1. constructor() // 加载的时候调用一次，可以舒适化state
2. render() // 渲染页面
3. componentDidMount() // 组件挂在后触发 

2. 更新阶段

1. componentWillReceiveProps(nextProps) // 接收新的props时触发
2. shouldComponentUpdate(nextProps, nextState) 
// 组件props或者state改变时触发， true: 更新， false: 不更新
// React.PureComponen
3. componentWillUpdate(nextProps, nextState) // 组件更新前触发
4. componentDidUpdate(nextProps, nextState) // 组件更新后触发

3. 卸载阶段

1. componentWillUnmount() 

16.4版本以后

1. getDerivedStateFromProps()

// 这个生命周期函数是为了替代componentWillReceiveProps存在的

// getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。

// 需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。

1：当state需要从props初始化时，使用

2：尽量不使用，维护俩者状态需要消耗额外资源，增加复杂度

3：只有父组件导致重新渲染时才会触发。

4：典型场景表单获取默认值

static getDerivedStateFromProps(nextProps, prevState) {
    const {type} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (type !== prevState.type) {
        return {
            type,
        };
    }
    // 否则，对于state不进行任何操作
    return null;
}

2. getSnapshotBeforeUpdate()

// 1：在render之后调用，state已更新
// 2：典型场景：获取render之前的dom状态

总结

1.React16新的生命周期弃用了componentWillMount、componentWillReceivePorps，componentWillUpdate

2.新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceivePorps，componentWillUpdate）

3.React16并没有删除这三个钩子函数，但是不能和新增的两个钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用。注意：React17将会删除componentWillMount、componentWillReceivePorps，componentWillUpdate

4.新增了对错误处理的钩子函数（componentDidCatch）

标签：触发,周期,nextProps,getDerivedStateFromProps,type,React,state,props,声明
来源： https://blog.csdn.net/qq_40924034/article/details/104812412