React - 组件的生命周期

一. 旧版本生命周期

• constructor(props) ：构造器 完成了React数据的初始化
• componentWillMount ：组件将要挂载的钩子
• componentDidMount ：组件挂载完毕的钩子
• componentWillReceiveProp(props) ：组件将要接收组件新的props的钩子
• shouldComponentUpdate ：控制组件是否继续更新
  必须返回值 true/false，返回值默认为 true。
• componentWillUpdate ：组件将要更新的钩子
• componentDidUpdate ：组件更新完成的钩子
• render ：页面渲染
• componentWillUnmount ：销毁组件之前的钩子

各阶段生命周期执行顺序：

1. 初始化阶段，挂载时
   constructor => componentWillMount => render => componentDidMount
2. 更新阶段
   componentWillReceiveProps => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate
3. 销毁组件
   componentWillUnmount

二. 新版本生命周期

• constructor(props) ：构造器 完成了React数据的初始化。
• getDerivedStateFromProps(props, state) ：若 state 的值在任何时候都取决于 props，那么可以使用 getDerivedStateFromProps。
  使用时需加static修饰符，如： static getDerivedStateFromProps(props, state) 。
  应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
• shouldComponentUpdate ：控制组件是否继续更新
  必须返回值 true/false，返回值默认为 true。
• render ：页面渲染。
• componentDidMount ：组件挂载完毕的钩子。
• getSnapshotBeforeUpdate ：最近更新渲染（提交到 DOM 节点）之前调用。
  应返回 snapshot 的值（或 null）。
• componentDidUpdate(prevProps, prevState, snapshotValue) ：组件更新完成的钩子。
• componentWillUnmount ：销毁组件之前的钩子。

各阶段生命周期执行顺序：

1. 初始化阶段，挂载时
   constructor => getDerivedStateFromProps(props, state) => render => componentDidMount
2. 更新阶段
   getDerivedStateFromProps(props, state) => shouldComponentUpdate => render => getSnapshotBeforeUpdate => componentDidUpdate
3. 销毁组件
   componentWillUnmount

三. 新旧生命周期对比

1. 废弃三个生命周期钩子
   componentWillMount
componentWillReceiveProps
componentWillUpdate
2. 新增两个生命周期钩子
   getDerivedStateFromProps
getSnapshotBeforeUpdate