图解React组件生命周期

更新日期: 2020-04-07阅读: 1.8k标签: 生命周期

一、组件生命周期

每个react类组件都包含“生命周期方法”(function组件是没有生命周期方法的),你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法。在接下来的文章中,生命周期方法的书写会遵照如下规则,以方便大家理解。

1、加粗生命周期方法表示常用的生命周期方法,开发中会经常使用到。

2、未加粗的生命周期方法表示罕见的生命周期方法,开发中很少会用到。

3、画中横线的生命周期方法表示即将过期的方法,开发中应避免使用。

4、若一定要使用即将失效的生命周期方法,可以参考官方文档。

首先通过一幅图来看下React组建的全部生命周期(version: ^16.4,之前的版本会略有区别)。



二、挂载

当组件实例被创建并插入 dom 中时,被称为组件挂载,其生命周期调用顺序如下:

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


1. constructor(props)  

在 React 组件挂载之前,会调用它的构造函数。在为 React.Component 子类实现构造函数时,应在其他语句之前前调用super(props)。否则,this.props在构造函数中可能会出现未定义的 bug。

通常,在 React 中,构造函数仅用于以下两种情况:

  1. 通过给this.state赋值对象来初始化内部 state。
  2. 为事件处理函数绑定实例

如果不初始化 state 且不进行方法绑定,则不需要为 React 组件实现构造函数。


2. static getDerivedStateFromProps(props, state)  

getDerivedStateFromProps会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。此方法无权访问组件实例。如果你需要,可以通过提取组件 props 的纯函数及 class 之外的状态,在getDerivedStateFromProps()和其他 class 方法之间重用代码


3. render()  

render()方法是 class 组件中唯一必须实现的方法。该函数应该为纯函数,这意味着在不修改组件 state 的情况下,每次调用时都返回相同的结果,并且它不会直接与浏览器交互。

如需与浏览器进行交互,请在componentDidMount()或其他生命周期方法中执行你的操作。保持render()为纯函数,可以使组件更容易思考。


4. componentDidMount()  

componentDidMount()会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。

这个方法是比较适合添加订阅的地方。如果添加了订阅,请不要忘记在componentWillUnmount()里取消订阅。

 

三、更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:

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

1、shouldComponentUpdate(nextProps, nextState)  

该方法是控制组件是否应该被更新。如果方法返回false则后续的生命周期方法将全部被跳过,该方法会接收nextProps 和nextState,可以通过比较this.props 和nextProps、this.state和nextState来决定是否要重新渲染组件,来对组件进行性能优化。你应该考虑使用内置的 PureComponent 组件,而不是手动编写 shouldComponentUpdate()

官网中不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率,且会损害性能。

2、getSnapshotBeforeUpdate(prevProps, prevState)  

getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

3、componentDidUpdate(prevProps, prevState, snapshot)  

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

当组件更新后,可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求。(例如,当 props 未发生变化时,则不会执行网络请求)

componentDidUpdate(prevProps) {
  // 典型用法(不要忘记比较 props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

你也可以在 componentDidUpdate() 中直接调用 setState(),但请注意它必须被包裹在一个条件语句里,正如上述的例子那样进行处理,否则会导致死循环。


四、卸载

componentWillUnmount()

componentWillUnmount()会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在componentDidMount()中创建的订阅等。


五、错误处理

static getDerivedStateFromError()

static getDerivedStateFromError(error) {
  // 更新 state 使下一次渲染可以显示降级 UI
  return { hasError: true };
}

此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state,你可以通过判断state中的某个字段,来显示降级UI

componentDidCatch()

此生命周期在后代组件抛出错误后被调用,可以用于日志记录。 它接收两个参数:

  1. error—— 抛出的错误。
  2. info—— 带有componentStack key 的对象
componentDidCatch(error, info) {
  logToMyService(info.componentStack);
}


链接: https://fly63.com/article/detial/8863

vue生命周期诠释

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期

Flutter中State生命周期

State 的生命周期,指的是在用户参与的情况下,其关联的 Widget 所经历的,从创建到显示,再到更新最后到停止,直至销毁等各个阶段,不同的阶段涉及到特定的任务处理。

理解react生命周期

挂载(Mounting)挂载指的是组件被实例化并插入到dom中,顺序如下:constructor -> getDerivedStateFromProps -> render -> componentDidMount,更新(Updating)当state变化或者props变化会引起更新

微信小程序APP生命周期

小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数,onLaunch----当小程序初始化完成时,会触发 onLaunch

vue的生命周期和钩子函数

其实在提到vue的生命周期和钩子函数的时候,有的人认为常用的钩子函数有10个,也有的人认为是8个,无论是10个还是8个对于我而言都是一样的,我们主要讲解8个vue的钩子函数。首先来一波官网的对于vue生命周期的图解

React 生命周期详解

请不要死记生命周期的顺序和作用,要理解 React 将这些生命周期暴露出来给开发者调用是因为开发者有使用这些生命周期的需求,通过这些生命周期,我们可以完成一些事情。主要可分为 初始化阶段、挂载阶段、更新阶段、卸载阶段

vue组件的生命周期

Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!