一张图带你认识 React16.3的生命周期_生命周期详解

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1. 前言

React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，可分成三个状态：

挂载时(Mounting)：已插入真实 DOM

更新时(Updating)：正在被重新渲染

卸载时(Unmounting)：已移出真实 DOM

在下面的生命周期图中，常用的生命周期方法标记为粗体。

2. react生命周期" title="react生命周期">react生命周期图

react16.3版本生命周期图：

react16.3和16.4生命周期差异：

  • 在16.3版本中，只有当props改变时，会触发getDerivedStateFromProps方法。

  • 在16.4版本中，当props/state或者强制更新时，都会触发getDerivedStateFromProps方法。

3. react 生命周期方法

3.1 常用的生命周期方法

生命周期方法描述
render()该方法是类组件中必须需要的方法。改变state/props或者forceUpdate()后，render都会被重新执行。render()函数应该是纯函数，这意味着它不会修改组件状态，它在每次调用时都返回相同的结果，并且不与浏览器直接交互。
constructor()该构造函数在挂载之前被调用。它仅用于两个目的：初始化本地状态this.state、·绑定事件。
componentDidMount()组件（插入树中）后立即调用。 可以在这个方法中发送AJAX请求、读取数据。改变state后，不会立刻拿到新数据，相当于vue中的mounted()
componentDidUpdate()在组件完成更新后立即调用。在初始化时不会被调用。改变state后，可以立刻拿到新数据，相当于vue中的$nextTick()。如果shouldComponentUpdate()返回false，该方法将不会被调用。
componentWillUnmount()在卸载和销毁组件之前立即调用。使用此方法执行任何必要的清除，例如使计时器无效，取消网络请求或清除在中创建的所有订阅componentDidMount()。

3.2 不常用的生命周期方法

生命周期方法描述
shouldComponentUpdate(nextProps, nextState)返回一个布尔值。在组件接收到新的props或者state时被调用。返回false的话，当props或者state发生变化，不会执行render()；在初始化时或者使用forceUpdate时不被调用。用来做性能优化，可以在你确认不需要更新组件时使用。
static getDerivedStateFromProps(props, state)

最早可以拿到父组件参数的钩子函数。返回一个新的state，或者返回null则不更新任何内容。在16.3和16.4中，有差异

getSnapshotBeforeUpdate()在更新DOM之前，render执行之后，此时虚拟DOM生成了，但是还没有渲染到页面上，可以拿到之前DOM的一些数据内容，必须要跟componentDidUpdate() 一起使用，应用场景：保存滚动条的位置
pureComponent()新版本中对getSnapshotBeforeUpdate钩子的优化，会动态判断state有没有变化 ，有变化就执行render，没有变化就不执行render
static getDerivedStateFromError(error)后代组件引发错误后，将调用此生命周期。在“渲染”阶段调用。它接收作为参数抛出的错误，并且应返回一个值以更新状态。
componentDidCatch(error, info)后代组件引发错误后，将调用此生命周期。在“提交”阶段调用，应用于记录错误等内容。

3.3 旧版本生命周期方法

下面的生命周期方法标记为“旧版”。它们仍然有效，但是不建议在新代码中使用它们。

方法描述
componentWillMount()在渲染前调用，使用componentDidMount()替代
componentWillReceiveProps()在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。使用componentDidUpdate()替代
componentWillUpdate()在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。使用componentDidUpdate()替代

4. 使用场景

在创建组件实例并将其插入DOM时，将按以下顺序调用这些方法：

  1. constructor()

  2. static getDerivedStateFromProps()

  3. render()

  4. componentDidMount()

更新中，更新可能是由于道具或状态的更改引起的。重新渲染组件时，将按以下顺序调用这些方法：

  1. static getDerivedStateFromProps()

  2. shouldComponentUpdate()

  3. render()

  4. getSnapshotBeforeUpdate()

  5. componentDidUpdate()

正在卸载，从DOM中删除组件时，将调用此方法：

  1. componentWillUnmount()

错误处理，在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。

  1. static getDerivedStateFromError()

  2. componentDidCatch()

参考资料：
https://reactjs.org/docs/react-component.html#lifecycle-methods
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

以上是 一张图带你认识 React16.3的生命周期_生命周期详解 的全部内容， 来源链接： utcz.com/z/384179.html

回到顶部