React 生命周期
大体上分三类
- Mount
- Update
- Unmount
Mount
- constructor()
componentWillMount()- render()
- componentDidMount()
Update
componentWillReceiveProps()/ static getDerivedStateFromProps()- shouldComponentUpdate()
componentWillUpdate()/ getSnapshotBeforeUpdate()- render()
- componentDidUpdate()
Unmount
- componentWillUnmount()
生命周期方法
componentWillMount（即将移除）
componentWillMount()
当 React 渲染一个组件的是你，首先进入该方法。
Note：componentWillMount()是唯一一个在render()之前调用的生命周期方法。因此是在服务端渲染中唯一被调用的方法。
因为componentWillMount()将被删除，所以官方推荐使用constructor()替代该方法
**Update：**该方法应该在新的代码中避免使用
State
可以在该方法中使用this.setState()但是不一定触发重新渲染。
componentDidMount
componentDidMount()
当该方法被调用时候，React 已经渲染了组件并且将组件插入 DOM。因此如有有任何依赖于 DOM 的初始化，应该放在这里。
State
该方法中可以使用this.setState()方法，它将触发重新渲染。
Use Cases
- fetch data
- 依赖 DOM 初始化
- 添加事件监听
componentWillReceiveProps（即将移除）
componentWillReceiveProps(nextProps)
当组件接收到新的props，该方法会首先被调用，但是需要注意一点，即使props并没有发生改变，该方法也会被调用，所以使用该方法的时候要确保比较this.props和nextProps，避免不必要的渲染。
Update：componentWillReceiveProps将被移除，使用新的static getDerivedStateFromProps代替。
static getDerivedStateFromProps（新增）
static getDerivedStateFromProps(props, state)
每次render都会调用该方法——即使props没有发生变化。所以要谨慎使用。
shouldComponentUpdate
shouldComponentUpdate(nextState, nextProps)
有些时候需要避免不必要的渲染，可以使用该方法。返回false意味着 React 不执行componentWillUpdate()，render()，componentDidUpdate()。
该方法在初始化时候不执行。
**Note：**根据 React 文档，React 可能将shouldComponentUpdate视做提示而不是严格的根据它的返回结果决定是否执行，也就是说可能出现shouldComponentUpdate返回false，但是还是发生重新渲染。
State
在该方法中不可以设置setState。
Use Case
如前所述，该方法可能有有问题。React 官方提供了另一个解决办法，所以如果发现某个组件慢，可以使用React.PureComponent替代React.component，它将对props和state提供一个浅层对照。
componentWillUpdate（即将移除）
componentWillUpdate(nextProps, nextState)
该方法在被渲染前调用。shouldComponentUpdate在新的props进入组件或者state改变的时候调用。
该方法在初始渲染时候不被调用。
Update：shouldComponentUpdate即将被移除。
State
在该方法中不能调用setState。
Use Cases
shouldComponentUpdate方法在render()前会被准确调用，所以在该方法中做任何跟 DOM 相关的操作是不合适的，因为很快会过期。
常见的用例有：
- 根据
state的变化设置变量 - 派发事件
- 开始动画
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState)
该方法在 React 16.3 被添加并且它配合componentDidUpdate。该方法应该覆盖了旧方法shouldComponentUpdate的所有用例。
getSnapshotBeforeUpdate在元素被渲染并写入 DOM 之前调用，这样，你在 DOM 更新前捕获 DOM 信息（例如：滚动位置）。
应该返回一个snapshot值或null，无论返回什么，shouldComponentUpdate都可以接收到snapshot参数。
Use Cases
如果想要获得一个 list 或者一个聊天窗口中的滚动位置，可以在getSnapshotBeforeUpdate中取到这些信息。然后将滚动信息作为snapshot值返回。这允许在更新DOM后在componentDidUpdate中设置正确的滚动位置。
componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot)
React 更新组件后，调用componentDidUpdate。该方法在初始渲染时候不会被调用。
Use Cases
如果组件更新后需要操作 DOM，可以使用该方法。
componentWillUnmount
componentWillUnmount()
在卸载，销毁组件之前调用该方法。
State
在卸载组件时候不能设置 State
Use Cases
使用该方法清理 actions。
- 删除在
componentDidMount或其他地方添加的事件监听 - 断开网络请求
- 清空计时器
- 清理在
componentDidMount中创建的 DOM 元素
