React组件生命周期

旧版本

一、挂载阶段

1. 组件将要挂载：componentWillMount
2. 组件挂载完成：componentDidMount

constructor(构造函数)–>componentWillMount(组件将要挂载)–>render(数据渲染)–>componentDidMount(组件挂载完成)

二、更新阶段

1. 父组件中改变了props传值时触发的函数：componentWillReceiveProps
2. 是否要更新数据：shouldComponentUpdate
3. 将要更新数据：componentWillUpdate
4. 数据更新完成：componentDidUpdate

shouldComponentUpdate(是否要更新数据，返回true才会继续更新)–>componentWillUpdate(组件将要更新)–>render(重新渲染)–>componentDidUpdate(组件更新完成)

三、销毁阶段

1. 组件将要销毁：componentWillUnmount

新版本

一、挂载阶段

1. 组件每次render、组件构建之后、每次获取新的props或state：getDerivedStateFromProps
2. 组件渲染完成(只调用一次)：componentDidMount

constructor(构造函数)–>getDerivedStateFromProps(组件构建完成之后)–>render(渲染)–>componentDidMount(挂载完成)

二、更新阶段

1. 组件每次render、组件构建之后、每次获取新的props或state：getDerivedStateFromProps
2. 组件接收到新的props或state：shouldComponentUpdate
3. update发生时、render之后，dom渲染之前：getSnapshotBeforeUpdate
4. 组件更新完成：componentDidUpdate

getDerivedStateFromProps(组件render前调用)–>shouldComponentUpdate(是否要更新数据，返回true才会继续更新)–>render(重新渲染，创建虚拟dom，diff算法)–>getSnapshotBeforeUpdate(更新前，可以覆盖componentWillUpdate的所有用法)–>componentDidUpdate(组件更新完成)

三、销毁阶段

1. 组件卸载之前：componentWillUnMount

四、错误处理

1. 后代组件抛出错误后（渲染阶段）：getDerivedStateFromError
2. 任何一处的javascript报错： componentDidCatch

如果发生错误，可以通过调用 setState 使用 componentDidCatch() 渲染降级 UI，但在未来的版本中将不推荐这样做。 可以使用静态 getDerivedStateFromError() 来处理降级渲染。

总结

1. React16新的生命周期弃用了componentWillMount、componentWillReceiveProps，componentWillUpdate
2. 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceiveProps，componentWillUpdate）
3. React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17将会删除componentWillMount、componentWillReceiveProps，componentWillUpdate
4. 新增了对错误的处理（componentDidCatch）