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

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

回到顶部