深入探讨 React 组件生命周期（新版）

深入探讨 React 组件生命周期（新版）

React 18 引入了一些新的组件生命周期函数，以提供更灵活和强大的控制。在新的生命周期中，我们可以更好地处理组件的渲染、更新和卸载过程。下面我们将深入了解这些新的生命周期函数。

1. componentDidMount

在组件挂载到 DOM 后立即调用。这是执行初始化操作的好地方，例如数据获取、订阅事件等。

componentDidMount() {
  console.log('Count---componentDidMount');
}

2. componentWillUnmount

在组件即将被卸载和销毁之前调用。可以执行一些清理工作，如取消订阅、清除计时器等。

componentWillUnmount() {
  console.log('Count---componentWillUnmount');
}

3. shouldComponentUpdate

在组件更新之前调用，用于判断组件是否需要重新渲染。默认情况下，它返回 true。

shouldComponentUpdate() {
  console.log('Count---shouldComponentUpdate');
  return true;
}

4. componentDidUpdate

在组件更新后立即调用。可以在这里执行与更新相关的操作，并访问先前的 props、state 以及 getSnapshotBeforeUpdate 返回的快照值。

componentDidUpdate(prevProps, prevState, snapshotValue) {
  console.log('Count---componentDidUpdate', { prevProps, prevState, snapshotValue });
}

5. getDerivedStateFromProps

在 render 之前调用，用于计算状态的派生状态。不太常用，因为它不允许直接访问组件实例。

static getDerivedStateFromProps(props, state) {
  console.log('Count---getDerivedStateFromProps', { props, state });
  return null;
}

6. getSnapshotBeforeUpdate

在最近的一次渲染输出提交给 DOM 之前调用。返回值将作为 componentDidUpdate 的第三个参数。

getSnapshotBeforeUpdate(prevProps, prevState) {
  console.log('Count---getSnapshotBeforeUpdate', { prevProps, prevState });
  return { name: 'Judith' };
}

举个例子

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

  componentDidMount() {
    console.log('Count---componentDidMount');
  }

  componentWillUnmount() {
    console.log('Count---componentWillUnmount');
  }

  shouldComponentUpdate() {
    console.log('Count---shouldComponentUpdate');
    return true;
  }

  componentDidUpdate(prevProps, prevState, snapshotValue) {
    console.log('Count---componentDidUpdate', { prevProps, prevState, snapshotValue });
  }

  // 若state的值在任何时候都取决于props，很少用到
  static getDerivedStateFromProps(props, state) {
    console.log('Count---getDerivedStateFromProps', { props, state });
    return null;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('Count---getSnapshotBeforeUpdate', { prevProps, prevState });
    return { name: 'Judith' };
  }

  add = () => {
    const { count } = this.state;
    this.setState({ count: count + 1 });
  }

  unmount = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'));
  }

  force = () => {
    this.forceUpdate();
  }

  render() {
    console.log('Count---render');
    const { count } = this.state;

    return (
      <div>
        当前值：{count} <br />
        <button onClick={this.add}>点击加1</button> <br />
        <button onClick={this.unmount}>卸载组件</button> <br />
        <button onClick={this.force}>不更新state，强制更新</button>
      </div>
    );
  }
}

通过深入了解 React 18 中引入的这些新的生命周期函数，我们能够更好地掌握组件的生命周期，实现更精细的控制和更高效的性能优化。在开发中，根据具体场景合理使用这些生命周期函数，将有助于构建更灵活、可维护的 React 应用。

参考

• 深入探讨 React 组件生命周期（新版）
• 完整代码