11 组件的生命周期

在上一篇中，我们学习了如何创建可复用的组件。在这篇文章中，我们将深入探讨组件的生命周期——即组件在其存在期间所经历的各种状态。

组件的生命周期是 React 中非常重要的一个概念，尤其在使用 class 组件时。React 组件从创建到销毁都经历多个阶段，而不同的生命周期方法则允许我们在每个阶段执行特定的代码。这使得我们能够在组件渲染前后、更新前后进行相应的操作，比如发起网络请求、手动更新 DOM 等。

组件生命周期的三个主要阶段

1. 挂载阶段（Mounting）
2. 更新阶段（Updating）
3. 卸载阶段（Unmounting）

1. 挂载阶段

当组件被创建并插入 DOM 时，将会调用以下生命周期方法：

• constructor(props)

  • 在组件创建时调用，用于初始化状态或绑定方法。

• static getDerivedStateFromProps(props, state)

  • 在每次渲染前被调用，可以根据props和state的变化来更新组件的状态。

• render()

  • 渲染组件 UI，返回要展示的 JSX。

• componentDidMount()

  • 组件已被渲染到 DOM 中，此时可以进行一些副作用操作，如请求数据。

示例代码

import React from 'react';

type MyComponentProps = {
  name: string;
};

type MyComponentState = {
  greeting: string;
};

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  constructor(props: MyComponentProps) {
    super(props);
    this.state = {
      greeting: '',
    };
  }

  static getDerivedStateFromProps(nextProps: MyComponentProps, prevState: MyComponentState) {
    if (nextProps.name !== prevState.greeting) {
      return { greeting: nextProps.name };
    }
    return null; // 没有状态更新
  }

  componentDidMount() {
    console.log('Component has mounted');
  }

  render() {
    return <h1>Hello, {this.state.greeting}!</h1>;
  }
}

2. 更新阶段

当组件的 state 或 props 发生变化时，组件将进入更新阶段。这个阶段的生命周期方法如下：

• static getDerivedStateFromProps(props, state)

  • 每次更新之前都会被调用，与挂载阶段相同。

• shouldComponentUpdate(nextProps, nextState)

  • 返回一个布尔值，指示组件是否需要更新，适用于性能优化。

• render()

  • 同样用于渲染组件 UI。

• getSnapshotBeforeUpdate(prevProps, prevState)

  • 在最新的渲染输出提交到 DOM 之前调用，可以用于捕捉 DOM 信息。

• componentDidUpdate(prevProps, prevState, snapshot)

  • 组件更新后被调用，可以在这里处理副作用，如进行网络请求。

示例代码

class MyComponentWithUpdate extends React.Component<MyComponentProps, MyComponentState> {
  constructor(props: MyComponentProps) {
    super(props);
    this.state = {
      greeting: '',
    };
  }

  static getDerivedStateFromProps(nextProps: MyComponentProps, prevState: MyComponentState) {
    if (nextProps.name !== prevState.greeting) {
      return { greeting: nextProps.name };
    }
    return null;
  }

  shouldComponentUpdate(nextProps: MyComponentProps, nextState: MyComponentState) {
    return nextProps.name !== this.props.name; // 仅当 name 变化时才更新
  }

  getSnapshotBeforeUpdate(prevProps: MyComponentProps, prevState: MyComponentState) {
    // 获取当前的 DOM 状态
    return { previousGreeting: prevState.greeting };
  }

  componentDidUpdate(prevProps: MyComponentProps, prevState: MyComponentState, snapshot: any) {
    console.log('Component updated from', snapshot.previousGreeting, 'to', this.state.greeting);
  }

  render() {
    return <h1>Hello, {this.state.greeting}!</h1>;
  }
}

3. 卸载阶段

当组件从 DOM 中移除时，将会调用以下生命周期方法：

• componentWillUnmount()
  • 用于清理工作，比如取消网络请求、清除定时器等。

示例代码

class MyComponentWithUnmount extends React.Component<MyComponentProps> {
  componentWillUnmount() {
    console.log('Component is about to unmount');
  }

  render() {
    return <h1>Component will unmount soon!</h1>;
  }
}

小结

通过以上的示例，我们了解了 React 组件的生命周期及其对应的生命周期方法。这些方法为我们提供了良好的机制来控制组件的行为、进行状态管理和执行副作用。

在下一篇中，我们将介绍 Props 与 State 的管理，深入探讨如何在组件之间传递数据和控制组件的状态变化。希望通过这些知识，你能够编写出更为复杂和灵活的组件。