幸运的兔脚

2019年04月23日

React组件的生命周期

每个组件都包含“生命周期方法”。
通常,组件的生命周期可以分为三个阶段:挂载阶段更新阶段卸载阶段
官方文档可参考:https://reactjs.org/docs/react-component.html#the-component-lifecycle
截至本文编辑日期,react 版本为:v16.8.6

挂载阶段

在这个阶段中,组件将会被创建,执行初始化,然后插入 DOM 中。
生命周期顺序如下:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

更新阶段

在组件插入 DOM 后,组件的 props 或 state 发生变化时会触发更新。
生命周期顺序如下:

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

卸载阶段

即组件从 DOM 中移除。
此时会调用如下方法:

  • componentWillUnmount()

补充

错误处理

当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法:

  • static getDerivedStateFromError()
  • componentDidCatch()

过时的 API

值得注意的是,在许多早期教程中经常提到的部分 API 方法在文档中被标记为“过时”,虽然这些接口还可以使用,但是官方并不建议在新版本中继续使用他们。
这几个接口分别是:

  • componentWillMount()
  • componentWillReceiveProps()
  • componentWillUpdate()

在官方博客Update on Async Rendering中可以看到相关建议与改进/替代方案。