React组件生命周期（新）

1、加载阶段（Mounting，4个钩子函数）

（1）constructor()——加载的时候调用一次，可以初始化state
（2）static getderivedStateFromProps(props, state)——组件每次被render的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法
（3）render()——react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
（4）componentDidMount()——组件渲染之后调用，只调用一次

2、更新阶段（Updating，5个钩子函数）

（1）static getDerivedStateFromProps(props, state)——组件每次被render的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法
（2）shouldComponentUpdate(nextProps, nextState)——组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）
（3）render()——react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
（4）getSnapshotBeforeUpdate(prevProps, prevState)——触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法
（5）componentDidUpdate()——组件加载时不调用，组件更新完成后调用

3、卸载阶段（Unmounting，1个钩子函数）

（1）componentWillUnmount()——组件渲染之后调用，只调用一次

4、错误处理

（1）componentDidCatch(error，info)——任何一处的javascript报错会触发

Reacts新旧生命周期对比.png