componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate 是 React 类组件中的一个生命周期方法，它在组件更新后立即调用。这个方法非常适合用来执行副作用（side effects），比如操作 DOM、发起网络请求或处理状态变化后的逻辑。与 componentDidMount 类似，componentDidUpdate 也是处理更新后操作的理想场所，但它只会在组件更新时调用，而不是在首次渲染时。

方法签名

componentDidUpdate(prevProps, prevState, snapshot);

• prevProps：更新前的 props。
• prevState：更新前的状态。
• snapshot：如果定义了 getSnapshotBeforeUpdate，则为该方法返回的值；否则为 undefined。

使用场景

操作 DOM

如果你需要在组件更新后直接操作 DOM 元素，可以在 componentDidUpdate 中进行。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    // 只有当 someProp 发生变化时才执行某些操作
    if (this.props.someProp !== prevProps.someProp) {
      this.myRef.current.focus();
    }
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

发起网络请求

当你需要根据新的 props 或 state 发起网络请求时，可以在 componentDidUpdate 中实现。

class DataFetchingComponent extends React.Component {
  componentDidUpdate(prevProps) {
    // 当 id 发生变化时重新获取数据
    if (this.props.id !== prevProps.id) {
      this.fetchData(this.props.id);
    }
  }

  fetchData = (id) => {
    fetch(`/api/data/${id}`)
      .then((response) => response.json())
      .then((data) => this.setState({ data }))
      .catch((error) => console.error("Error fetching data:", error));
  };

  render() {
    // 渲染逻辑...
  }
}

处理滚动位置或其他 UI 状态

结合 getSnapshotBeforeUpdate，你可以在 componentDidUpdate 中恢复更新前的某些 UI 状态，如滚动位置。

class ScrollingList extends React.Component {
  listRef = React.createRef();

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 在更新之前保存滚动位置
    return this.listRef.current.scrollTop;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 在更新之后恢复滚动位置
    if (snapshot !== null) {
      this.listRef.current.scrollTop = snapshot;
    }
  }

  render() {
    return <ul ref={this.listRef}>{/* 渲染列表项 */}</ul>;
  }
}

注意事项

1. 避免无限循环更新：确保在 componentDidUpdate 中设置新状态时检查条件，以防止触发不必要的更新循环。例如，在比较新旧 props 或 state 时使用严格相等性检查 (===) 来避免不必要的更新。

2. 清理副作用：对于任何在 componentDidUpdate 中启动的副作用（如网络请求、事件监听器、定时器等），确保在组件卸载时通过 componentWillUnmount 进行清理，以避免内存泄漏或其他问题。

3. 不要直接修改 props：componentDidUpdate 中不应该直接修改 props。如果需要根据 props 更新状态，请使用 getDerivedStateFromProps 或者更推荐的方式是让父组件负责管理状态并通过 props 传递给子组件。

4. 性能优化：尽量减少在 componentDidUpdate 中执行的操作量，特别是那些可能影响性能的操作（如复杂的计算、DOM 操作等）。考虑使用 shouldComponentUpdate 或者函数组件中的 React.memo 和 useMemo 来避免不必要的更新。

函数组件中的替代方案

对于函数组件，你可以使用 useEffect Hook 来实现类似的功能。useEffect 提供了更灵活的方式来处理副作用，并且可以通过依赖项数组控制何时触发效果。

import React, { useEffect, useState } from "react";

function MyComponent({ someProp }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 当 someProp 发生变化时发起网络请求
    const fetchData = async () => {
      const response = await fetch(`/api/data/${someProp}`);
      const result = await response.json();
      setData(result);
    };

    fetchData();

    // 返回一个清理函数（可选）
    return () => {
      // 清理逻辑
    };
  }, [someProp]); // 监听 someProp 的变化

  return <div>{data ? JSON.stringify(data) : "Loading..."}</div>;
}

export default MyComponent;

在这个例子中，useEffect 只会在 someProp 发生变化时触发，并且可以包含一个清理函数来处理副作用的清理工作。

总结

通过理解 componentDidUpdate 的工作原理及其最佳实践，你可以更好地决定何时以及如何使用它来管理组件的副作用和响应状态变化。