【React系列三】React中常见的生命周期

【React系列一】初学 React:从 JSX 到组件运用 - 掘金 (juejin.cn)

【React系列二】React中组件通信的几种方式 - 掘金 (juejin.cn))

什么是 React 组件生命周期?

React 组件生命周期指的是组件从创建、渲染到销毁的整个过程。在这个过程中,React 组件经历了不同的阶段,并在每个阶段执行特定的生命周期方法。

这些方法帮助开发人员在组件的不同生命周期阶段执行特定的操作,如初始化状态、发送网络请求、处理用户交互等。

常用的生命周期

不常用的生命周期

组件生命周期的阶段

React 组件的生命周期可以分为三个主要阶段:

  1. 挂载阶段(Mounting) :组件被实例化并插入 DOM 中的过程。这个阶段包括以下生命周期方法:

    • constructor()
    • static getDerivedStateFromProps()
    • render()
    • componentDidMount()
  2. 更新阶段(Updating) :组件的 props 或 state 发生变化,导致组件重新渲染的过程。这个阶段包括以下生命周期方法:

    • static getDerivedStateFromProps()
    • shouldComponentUpdate()
    • render()
    • getSnapshotBeforeUpdate()
    • componentDidUpdate()
  3. 卸载阶段(Unmounting) :组件从 DOM 中移除的过程。这个阶段只包含一个生命周期方法:

    • componentWillUnmount()

挂载阶段生命周期方法

在组件被实例化并插入 DOM 中时,以下生命周期方法被调用:

  1. constructor(props)

    • 构造函数,在组件创建时调用,用于初始化状态和绑定事件处理函数。
    • 在构造函数中调用 super(props) 来调用父类的构造函数,并将 props 传递给父类。
    • 初始化组件的状态可以通过 this.state = { } 实现。
  2. static getDerivedStateFromProps(props, state)

    • 当组件接收到新的 props 时调用,在渲染之前执行。
    • 用于根据新的 props 计算并更新组件的状态。
    • 应返回一个对象来更新状态,或者返回 null 来表示不需要更新状态。
  3. render()

    • 必需的生命周期方法,用于渲染组件的 UI。
    • 应返回一个 React 元素,描述组件的输出。
    • 不应该在这个方法中修改组件的状态或执行副作用操作。
  4. componentDidMount()

    • 在组件的初始渲染之后立即被调用的
    • 通常在这个方法中执行一些初始化操作(比如发起网络请求、订阅事件、获取初始数据)
    • 这个方法只会在组件的生命周期中被调用一次,因此适合进行一次性的初始化工作

代码示例

javascript 复制代码
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  static getDerivedStateFromProps(props, state) {
    // 在这里可以根据 props 计算并更新 state
    return null;
  }

  componentDidMount() {
    // 在组件挂载后执行一次性操作,比如发送网络请求
    console.log('Component mounted');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;

更新阶段生命周期方法

当组件的 props 或 state 发生变化,导致组件需要重新渲染时,以下生命周期方法被调用:

  1. shouldComponentUpdate(nextProps, nextState)
  • 在组件接收到新的 props 或者 state 时被调用,在渲染之前执行。
  • 可以根据新的 props 或者 state 决定是否需要重新渲染组件。
  • 默认返回 true,表示组件将会重新渲染,可以通过返回 false 来阻止重新渲染,以提升性能。
  1. render()
  • 必需的生命周期方法,用于渲染组件的 UI。
  • 应返回一个 React 元素,描述组件的输出。
  • 不应该在这个方法中修改组件的状态或执行副作用操作。
  1. getSnapshotBeforeUpdate(prevProps, prevState)
  • 在最新的渲染输出被提交到 DOM 之前调用。
  • 用于获取更新前的 DOM 快照或执行一些 DOM 操作。
  • 返回的值将作为 componentDidUpdate 方法的第三个参数传递。
  1. componentDidUpdate(prevProps, prevState, snapshot)
  • 在组件更新完成后立即调用。
  • 通常用于执行一些副作用操作,比如更新后的 DOM 操作、发送网络请求等。
  • 可以访问到更新之前的 props、state,以及通过 getSnapshotBeforeUpdate 返回的值。
javascript 复制代码
import React, { Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 在这里可以根据新的 props 和 state 判断是否需要重新渲染
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 在更新 DOM 之前获取当前 DOM 的快照或执行一些 DOM 操作
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 在组件更新后执行一些操作,比如更新后的 DOM 操作
    console.log('Component updated');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;

卸载阶段生命周期方法

在组件从 DOM 中移除时,以下生命周期方法被调用:

  1. componentWillUnmount()

    • 在组件即将被销毁并从 DOM 中移除之前调用。
    • 用于执行一些清理工作,比如取消订阅、清除定时器等。
    • 在这个方法中不能调用 setState,因为组件即将被销毁。
javascript 复制代码
import React, { Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  componentWillUnmount() {
    // 在组件被销毁前执行清理操作,比如取消订阅或清除定时器
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;

小结

PS: 希望本文能够帮助大家更深入地理解 React 组件的生命周期。

都看到这里了来个一键三连吧~

相关推荐
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami1 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111112 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼2 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250032 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235952 小时前
web复习(三)
前端
AiFlutter2 小时前
Flutter-底部分享弹窗(showModalBottomSheet)
java·前端·flutter