生命周期

大约 4 分钟

生命周期

React 生命周期是指组件从创建到销毁所经历的一系列阶段和方法。在每个阶段，React 都会调用特定的方法，开发者可以在这些方法中添加自己的逻辑。了解生命周期方法对于在适当的时机进行状态更新、数据获取和清理工作非常重要。

React 组件生命周期概览

React 组件的生命周期可以分为三个主要阶段：挂载阶段、更新阶段和卸载阶段。

挂载阶段 (Mounting)

挂载阶段是指组件实例被创建并插入到 DOM 中。在这个阶段，React 会调用以下生命周期方法：

constructor(props): 组件的构造函数，用于初始化组件的状态和绑定事件处理函数。
示例：

constructor(props) {
    super(props);
    this.state = { count: 0 };
}

static getDerivedStateFromProps(props, state): 在组件实例化后和更新前调用，用于根据 props 更新 state。

用途：当组件的 props 发生变化时，可以通过这个方法更新组件的 state。

示例：

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.someValue !== prevState.someValue) {
    return { someValue: nextProps.someValue };
  }
  return null;
}

render(): 必须实现的方法，用于渲染组件的 JSX。

用途：在组件的 render 方法中，可以返回一个 React 元素，表示组件的 UI 结构。

示例：

render() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

componentDidMount(): 在组件挂载到 DOM 后调用，可以在这里执行数据获取、订阅事件等操作。

用途：在组件挂载后执行一些副作用操作，比如数据获取、订阅事件等。

示例：

componentDidMount() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
}

更新阶段 (Updating)

更新阶段是指组件的 props 或 state 发生变化时，React 会调用以下生命周期方法：

static getDerivedStateFromProps(props, state): 在组件实例化后和更新前调用，用于根据 props 更新 state。

用途：当组件的 props 发生变化时，可以通过这个方法更新组件的 state。

示例：

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.someValue !== prevState.someValue) {
    return { someValue: nextProps.someValue };
  }
  return null;
}

shouldComponentUpdate(nextProps, nextState): 在组件更新前调用，用于判断是否需要重新渲染组件。如果返回 false，则组件不会重新渲染。

用途：通过比较 nextProps 和 nextState 与当前组件的 props 和 state，可以决定是否需要重新渲染组件。

示例：

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.someValue !== this.props.someValue;
}

render(): 必须实现的方法，用于渲染组件的 JSX。

用途：同装载阶段

getSnapshotBeforeUpdate(prevProps, prevState): 在组件更新前调用，可以在这里获取 DOM 的快照信息。

用途：在组件更新前获取 DOM 的快照信息，以便在 componentDidUpdate 中使用。

示例：

getSnapshotBeforeUpdate(prevProps, prevState) {
  return document.getElementById('someElement').scrollHeight;
}

componentDidUpdate(prevProps, prevState, snapshot): 在组件更新后调用，可以在这里执行副作用操作，如更新 DOM、发送网络请求等。

用途：在组件更新后执行一些副作用操作，比如更新 DOM、发送网络请求等。

示例：

componentDidUpdate(prevProps, prevState, snapshot) {
  if (this.props.someValue !== prevProps.someValue) {
    document.getElementById('someElement').scrollTo(0, snapshot);
  }
}

卸载阶段 (Unmounting)

卸载阶段是指组件从 DOM 中移除时，React 会调用以下生命周期方法：

componentWillUnmount(): 在组件卸载前调用，可以在这里执行清理操作，如取消订阅事件、清除定时器等。

用途：在组件卸载前执行一些清理操作，比如取消订阅事件、清除定时器等。

示例：

componentWillUnmount() {
  clearInterval(this.timer);
}

错误处理阶段 (Error Handling)

错误处理阶段是指组件在渲染过程中发生错误时，React 会调用以下生命周期方法：

componentDidCatch(error, info): 在组件渲染过程中发生错误时调用，可以在这里处理错误。

用途：在组件渲染过程中发生错误时，可以在这里处理错误，比如记录错误信息、显示错误提示等。

示例：

componentDidCatch(error, info) {
  console.error('Error:', error);

  // 可以在这里发送错误信息到错误跟踪服务
}

总结

React 生命周期方法提供了在组件的不同阶段执行代码的能力，可以帮助开发者更好地控制组件的行为。需要注意的是，React 16.3 版本引入了新的生命周期方法，如 getDerivedStateFromProps 和 getSnapshotBeforeUpdate，这些方法应该优先使用，以避免使用已经被弃用的生命周期方法。