炼金中...

幸运兔脚

【笔记】React组件的生命周期
组件的生命周期每个组件都包含“生命周期方法”。通常,组件的生命周期可以分为三个阶段:挂载阶段、更新阶段、卸载阶段。...
扫描右侧二维码阅读全文
23
2019/04

【笔记】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中可以看到相关建议与改进/替代方案。

Last modification:April 23rd, 2019 at 04:33 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 星河酱

    兔脚兔脚,加把劲嗷~~

Leave a Comment