React：状态变更时API调用应放置在何处？

嘿，这个问题问到点子上了——处理状态变更后的API调用很容易踩坑，比如无限循环或者多余请求，我来给你掰扯清楚不同场景下的正确选择和最佳实践：

类组件场景 #

优先用 componentDidUpdate() #

这是类组件里处理状态/ props变更后副作用（比如API调用）的标准方法。不过一定要加条件判断，不然每次组件更新都会触发API调用，大概率导致无限循环！

举个例子，假设我们要根据userId状态的变化请求用户详情：

componentDidUpdate(prevProps, prevState) {
  // 只有当userId和之前不一样时，才发起API请求
  if (prevState.userId !== this.state.userId) {
    fetch(`/api/users/${this.state.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }))
      .catch(err => console.error(err));
  }
}

绝对不要用 getDerivedStateFromProps() #

这个静态方法的唯一作用是根据props更新state，它是纯函数，不能包含任何副作用（比如API调用、定时器），而且它没有办法访问组件实例，也不能做异步操作，所以完全不适合放API调用。

函数组件场景（现在的最佳实践） #

如果你用的是函数组件，直接用useEffect钩子就对了——这是React官方推荐的处理副作用的方式。

同样以userId变化触发API请求为例：

import { useEffect, useState } from 'react';

function UserProfile() {
  const [userId, setUserId] = useState(1);
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 定义请求控制器，用于组件卸载时取消请求，避免内存泄漏
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchUser = async () => {
      try {
        const res = await fetch(`/api/users/${userId}`, { signal });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        // 忽略取消请求的错误
        if (err.name !== 'AbortError') {
          console.error(err);
        }
      }
    };

    fetchUser();

    // 清理函数：组件卸载或依赖变化时取消请求
    return () => controller.abort();
  }, [userId]); // 依赖数组：只有userId变化时，才重新执行这个effect

  // 渲染逻辑...
}

这里的关键是正确设置依赖数组：

• 空数组[]：只在组件挂载时执行一次
• 指定依赖（比如[userId]）：只有依赖项变化时才执行
• 不写依赖数组：每次组件渲染都执行，容易导致无限循环

通用最佳实践 #

1. 加条件判断/正确设置依赖：不管是类组件还是函数组件，都要确保API调用只在必要的时候触发（也就是相关状态/ props真的变化时），避免不必要的请求和性能浪费。
2. 处理异步请求的清理：如果组件在API请求完成前就卸载了，一定要取消请求，避免内存泄漏（比如上面例子里的AbortController）。
3. 避免在render或setState回调里放API调用：render是纯函数，不能有副作用；setState的回调虽然能执行，但不是处理这类场景的标准方式，可读性和维护性都差。

内容的提问来源于stack exchange，提问作者Rahul Yadav