前言

react16以后的版本相较于之前的版本，整体进行了重构，引入了Fiber架构这种设计，将一个任务分成多个小任务，且可根据优先级调度任务的执行与中止与否，从而提升了渲染速度和性能。

生命周期

1、创建时

1
2
3
4
5

constructor
static getDerivedStateFromProps
render
componentDidMount

2、更新时

1
2
3
4
5
static getDerivedStateFromProps
shouldComponentUpdate
getSnapshotBeforeUpdate
render
componentDidUpdate

3、卸载时

1
componentWillUnmount

4、其它

不建议使用的生命周期UNSAFE_*，且后面将会移除；

1
2
3
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillMount
UNSAFE_componentWillUpdate

5、错误捕获

1
componentDidCatch()

参考图

总结

  • static getDerivedStateFromProps能不用就不用，使用会增加组件复杂度。
  • 带UNSAFE_*的生命周期能不用也不用，后面的大版本将移除。
  • getSnapshotBeforeUpdate中state已更新，可以获取render前的dom。

React生命周期