什么是 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()

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

代码示例 ：

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 返回的值。

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，因为组件即将被销毁。

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 组件的生命周期。

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