react生命周期16版本删除了什么钩子函数?为什么删除?有什么替代的

　　react和vue一样，生命周期也分为三个阶段：初始化、运行中、销毁。

　　react生命周期在16后面版本进行了更新迭代，初始化阶段生命周期顺序：

　　先执行constructor，在这里可以创建组件实例，传递属性，挂载初始状态、this-binding

　　然后执行static getDerivedStateFromProps， 这是新增的一个生命周期钩子函数，本身是一个静态方法，内部不能访问this，可以根据当前的属性和状态生成一个派生的状态，但是需要注意的是，任何属性和状态变化都会再次引起这个钩子函数的执行，所以往往会存在一些性能问题。需要自行做缓存优化。

　　接下来删除了一个componentWillMount，类似与vue中的beforeMount，因为react提倡render前不做副作用动作，保持纯净，所以被废弃。

　　接下来执行render函数，在render中也不要做副作用动作，容易造成死循环，作用就是生成虚拟dom结构。

　　最后执行的是componentDidMount，在这里可以做副作用动作了，初始的调用接口、dom操作、一些插件的初始化、事件的绑定。

　　当组件的属性和状态变化或者执行forceUpdate的时候， 会引起运行中阶段的钩子函数执行。

　　接下来删除了一个componentWillReceiveProps，这个钩子函数会在属性更新的时候执行，我们之前可以在这里根据更新后的属性来更改自身的状态或者做一些其他的逻辑动作，现在可以利用getDerivedStateFromProps替代，并且因为render前不能做副作用，所以废弃。

　　首先还是执行static getDerivedStateFromProps， 再次进行派生状态的计算生成。

　　接下来会执行shouldComponentUpdate，在这个钩子函数中可以通过this上当前的属性和状态与函数参数中接收到更改后的属性和状态进行对比，判断是否要继续执行其他的生命周期钩子函数，提升性能，需要注意的是forceUpdate执行后，不会执行shouldComponentUpdate，也可以利用PureComponent父类中默认的浅对比的shouldComponentUpdate来优化效果。

　　接下来还会执行render，之后就是static getSnapshotBeforeUpdate，在这里可以提前进行一些数据的计算，将结果返回到componentDidUpdate中，进行逻辑分离， 之前在componentDidUpdate前会执行一个componentWillUpdate，因为功能能力被getSnapshotBeforeUpdate取代，自身也不能做副作用，所以被废弃。

　　最后执行componentDidUpdate，在这里可以进行插件更新、dom的操作，也可以根据this上最新的属性和方法与函数参数中接收到的之前的属性和方法对比，判断此次更新的是哪一个数据，起到监听数据变化的作用。

　　当组件销毁的时候，例如路由切换、组件切换，对应组件的是componentWillUnmount会执行，在这里我们可以做一些善后工作，例如清除计时器、事件解绑等。

上一篇

react 中 useMemo 和 useCallback的区别?

下一篇

Redux解决了什么问题？是如何工作的？