什么是 React 组件生命周期？

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

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

常用的生命周期

不常用的生命周期

组件生命周期的阶段

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

挂载阶段（Mounting） ：组件被实例化并插入 DOM 中的过程。这个阶段包括以下生命周期方法：
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
更新阶段（Updating） ：组件的 props 或 state 发生变化，导致组件重新渲染的过程。这个阶段包括以下生命周期方法：
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
卸载阶段（Unmounting） ：组件从 DOM 中移除的过程。这个阶段只包含一个生命周期方法：
- componentWillUnmount()

挂载阶段生命周期方法

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

constructor(props)
- 构造函数，在组件创建时调用，用于初始化状态和绑定事件处理函数。
- 在构造函数中调用 super(props) 来调用父类的构造函数，并将 props 传递给父类。
- 初始化组件的状态可以通过 this.state = { } 实现。
static getDerivedStateFromProps(props, state)
- 当组件接收到新的 props 时调用，在渲染之前执行。
- 用于根据新的 props 计算并更新组件的状态。
- 应返回一个对象来更新状态，或者返回 null 来表示不需要更新状态。
render()
- 必需的生命周期方法，用于渲染组件的 UI。
- 应返回一个 React 元素，描述组件的输出。
- 不应该在这个方法中修改组件的状态或执行副作用操作。
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 发生变化，导致组件需要重新渲染时，以下生命周期方法被调用：

shouldComponentUpdate(nextProps, nextState)

在组件接收到新的 props 或者 state 时被调用，在渲染之前执行。
可以根据新的 props 或者 state 决定是否需要重新渲染组件。
默认返回 true，表示组件将会重新渲染，可以通过返回 false 来阻止重新渲染，以提升性能。

render()

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

getSnapshotBeforeUpdate(prevProps, prevState)

在最新的渲染输出被提交到 DOM 之前调用。
用于获取更新前的 DOM 快照或执行一些 DOM 操作。
返回的值将作为 componentDidUpdate 方法的第三个参数传递。

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 中移除时，以下生命周期方法被调用：

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

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

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

什么是 React 组件生命周期？

组件生命周期的阶段

挂载阶段生命周期方法

更新阶段生命周期方法

卸载阶段生命周期方法

小结