React常用生命周期

抄录

一、 React15

image.png

1、挂载过程

 //  完成了React数据的初始化。 props、state
constructor()
//  组件已经完成初始化数据，但是还未渲染DOM时执行的逻辑
componentWillMount()
//  DOM完成，网络请求
componentDidMount() 

2、更新过程

// 接收父组件新的props时，重新渲染组件执行的逻辑。
componentWillReceiveProps(nextProps)
// 在setState以后，state发生变化，组件会进入重新渲染的流程时执行的逻辑。
// 在这个生命周期中return false可以阻止组件的更新，主要用于性能优化。
shouldComponentUpdate(nextProps,nextState)
// shouldComponentUpdate返回true以后，组件进入重新渲染的流程时执行的逻辑。
componentWillUpdate (nextProps,nextState)
// 页面渲染执行的逻辑，render函数把jsx编译为函数并生成虚拟dom，
// 然后通过其diff算法比较更新前后的新旧DOM树，并渲染更改后的节点。
render()
// 重新渲染后执行的逻辑。
componentDidUpdate(prevProps,prevState)

3、卸载过程

// 组件的卸载前执行的逻辑，比如进行“清除组件中所有的setTimeout、setInterval等计时器”或“移除removeEventListener”等操作。
componentWillUnmount()

二、 React16

image.png

react16.4后使用了新的生命周期，使用getDerivedStateFromProps代替了旧的componentWillReceiveProps及componentWillMount。使用getSnapshotBeforeUpdate代替了旧的componentWillUpdate。
在 Fiber 机制下，render 阶段是允许暂停、终止和重启的。
废弃的生命周期钩子函数，它们都处于render阶段，都可能被重复执行。