React函数组件异步操作的安全性及最佳实践咨询

先看给出的示例组件：

function MyComponent() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any|null>(null);

  function loadData() {
    if (loading) return;

    setLoading(true);

    fetch(/* ... */)
      .then(setData)
      .catch(console.error)
      .then(() => {
        setLoading(false);
      });
  }

  useEffect(() => {
    if (data === null) return;
    console.log(data);
  }, [data]);

  return (
    <button onClick={loadData} disabled={loading} />
  );
}

1. 在React函数组件中使用引用hook变量的函数（如loadData）是否安全？ #

不完全安全。函数组件每次渲染都会重新创建loadData，函数内部引用的loading是当前渲染周期的状态快照，并非实时更新的值。比如组件在fetch请求过程中因其他状态变更重新渲染时，旧版本的loadData会持有渲染时的旧loading值——如果没有按钮disabled的限制，用户再次点击可能触发重复请求。

解决办法是用useCallback包裹loadData，把依赖项loading加入依赖数组，确保每次loading变化时函数都会更新，始终引用最新状态：

const loadData = useCallback(() => {
  if (loading) return;
  // ... 原有逻辑
}, [loading]);

2. 异步操作完成后在loadData中调用setX(...)是否安全？ #

默认情况下不安全。如果异步操作（比如fetch）还未完成，组件就被卸载了，此时调用setData或setLoading会触发React警告：Cannot update a component that has been unmounted，因为已卸载的组件无法再更新状态。

3. 这种设计在函数组件中处理异步代码时是否整体安全？若不安全，处理函数组件中的Promise应采用何种模式？ #

这种设计存在潜在风险，整体不算完全安全，除了上述两个问题，还可能因状态快照导致逻辑偏差。推荐以下改进模式：

• 用useCallback稳定异步函数：确保函数始终引用最新的状态值，避免旧快照引发的错误。
• 使用AbortController取消请求：在组件卸载或触发新请求时，取消未完成的fetch请求，避免无效的回调执行：

  const loadData = useCallback(() => {
    if (loading) return;
    const controller = new AbortController();
    const signal = controller.signal;
  
    setLoading(true);
    fetch(/* ... */, { signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      })
      .then(() => setLoading(false));
  
    return () => controller.abort();
  }, [loading]);
  

• 跟踪组件挂载状态：用useRef标记组件是否仍处于挂载状态，在调用setState前检查，避免卸载后更新状态：

  function MyComponent() {
    const isMounted = useRef(true);
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<any|null>(null);
  
    useEffect(() => {
      return () => {
        isMounted.current = false;
      };
    }, []);
  
    const loadData = useCallback(() => {
      if (loading) return;
      setLoading(true);
  
      fetch(/* ... */)
        .then(res => res.json())
        .then(result => {
          if (isMounted.current) setData(result);
        })
        .catch(console.error)
        .then(() => {
          if (isMounted.current) setLoading(false);
        });
    }, [loading]);
  
    // ... 其余逻辑
  }
  

• 自动触发的异步操作用useEffect+清理函数：如果异步操作是组件挂载或状态变更时自动触发的，直接在useEffect中执行，并利用清理函数取消请求或标记卸载：

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;
  
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await fetch(/* ... */, { signal });
        const data = await res.json();
        setData(data);
      } catch (err) {
        if (err.name !== 'AbortError') console.error(err);
      } finally {
        setLoading(false);
      }
    };
  
    fetchData();
    return () => controller.abort();
  }, []);
  

内容的提问来源于stack exchange，提问作者Felix ZY