react生命周期有哪些?16版本生命周期发生了哪些变化?

1,048 阅读1分钟

-首先15版本的生命周期有

初始化阶段

constructor构造函数
component  Will  Mount组件初始化渲染前调用
render组件渲染
component  Did  Mount组件挂载到DOM后调用

更新阶段

分为state和props发生改变的时候

state走向
    state走==>>>should  Component  Update组件是否需要更新?如果更新则继续,否则就断开
     ==>>>component  Will  Update组件更新前调用
     ==>>>render组件渲染
     ==>>>component  Did  Update组件更新后调用

//props走向

props走==>>>component Will Receive Props组件将要接收新props前调用

==>>>should  Component  Update组件是否需要更新?如果更新则继续,否则就断开
==>>>component  Will  Update组件更新前调用
==>>>render组件渲染
==>>>component  Did  Update组件更新后调用

卸载阶段

component  Will  Unmount组件卸载前调用

React16新的生命周期弃用了

==>>>componentWillMount
==>>>componentWillReceivePorps
==>>>componentWillUpdate
==>>>新增
==>>>getDerivedStateFromProps
==>>>getSnapshotBeforeUpdate来代替弃用的三个钩子函数。
==>>>React16并没有删除这三个钩子函数,但是不能和新增的钩子函数混用, ==>>>React17将会删除这三个钩子函数
==>>>componentDidCatch(错误处理)
-getDerivedStateFromProps:组件每次被rerender的时候,每次接收新的props之后都会返回一个对象作为新的state,返回null则说明不需要更 新state;配合componentDidUpdate,可以覆盖componentWillReceiveProps的所有用法
-getSnapshotBeforeUpdate:触发时间:update发生的时候,在render之后,在组件dom渲染之前;返回一个值,作为componentDidUpdate的第三个参数;配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法