react的生命周期

react 生命周期示意图

Reconciliation阶段

• componentWillMount：组件即将被装载、渲染到页面上
• componentWillReceiveProps：组件将要接收到属性的时候调用
• shouldComponentUpdate：组件接受到新属性或者新状态的时候调用（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
• componentWillUpdate：组件即将更新

Commit阶段

• componentDidMount：组件真正在被装载之后
• componentDidUpdate：组件已经更新
• componentWillUnmount：组件即将销毁

因为 Reconciliation 阶段是可以被打断的，所以 Reconciliation 阶段会执行的生命周期函数就可能会出现调用多次的情况，从而引起 Bug。由此对于 Reconciliation 阶段调用的几个函数，除了 shouldComponentUpdate 以外，其他都应该避免去使用，并且 react16 中也引入了新的 API 来解决这个问题。

新增的生命周期函数

getDerivedStateFromProps(nextProps, prevState)

• 替换 componentWillReceiveProps
• 该周期函数的作用是根据props初始化或更新state

getSnapshotBeforeUpdate(prevProps, prevState)

• 替代componentWillUpdate
• 该函数会在DOM 更新前被调用，用于读取最新的 DOM 数据。