如何在React函数组件中尽早发起异步API请求？

为什么useEffect不是最优选择？ #

我们通常用useEffect发起API请求，比如：

function Pizzeria() {
  const [pizzas, setPizzas] = useState([])
  
  useEffect(
    () => fetchPizzas().then(setPizzas),
    []
  )

  return (
    <div>
      {pizzas.map((p, i) => <Pizza pizza={p} key={i} />)}
    </div>
  )
}

但useEffect会在组件首次渲染完成后才触发，网络请求启动时间晚于组件初始化，在对性能敏感的场景下，这会增加用户等待数据的时间。

类组件的componentWillMount为什么被废弃？ #

componentWillMount曾经可以在组件挂载前发起请求，但它被废弃的核心原因是：

• React异步渲染模式下可能被多次调用，导致重复请求；
• 服务器渲染（SSR）时会在服务端和客户端各执行一次，引发冗余请求；
• 无法处理组件卸载后的状态更新，容易导致内存泄漏。

函数组件中提前发起请求是否可行？ #

可行，但需要规避componentWillMount曾经的问题。直接在组件顶层（函数体内部、useEffect之外）发起请求，或用useRef控制请求触发时机，是很多成熟库的实现思路，只要处理好边界情况，就不会有问题。

最佳实现方式 #

1. 手动实现：顶层发起+边界处理 #

如果不想引入第三方库，可以手动控制请求时机，同时处理重复请求、取消请求和组件挂载状态：

import { useState, useRef, useEffect } from 'react';

function Pizzeria() {
  const [pizzas, setPizzas] = useState([]);
  const [error, setError] = useState(null);
  // 标记组件是否挂载
  const isMounted = useRef(false);
  // 用于取消请求的控制器
  const abortController = useRef(new AbortController());
  // 标记是否已发起过请求，避免重复触发
  const hasFetched = useRef(false);

  // 首次执行组件时发起请求
  if (!hasFetched.current) {
    hasFetched.current = true;
    fetchPizzas(abortController.current.signal)
      .then(data => {
        // 仅在组件挂载时更新状态
        if (isMounted.current) {
          setPizzas(data);
        }
      })
      .catch(err => {
        // 忽略请求被取消的错误
        if (err.name !== 'AbortError' && isMounted.current) {
          setError(err);
        }
      });
  }

  useEffect(() => {
    isMounted.current = true;
    // 组件卸载时标记为未挂载，并取消请求
    return () => {
      isMounted.current = false;
      abortController.current.abort();
    };
  }, []);

  if (error) return <div>加载失败：{error.message}</div>;
  return (
    <div>
      {pizzas.map(pizza => <Pizza pizza={pizza} key={pizza.id} />)}
    </div>
  );
}

2. 推荐：使用TanStack Query（React Query） #

专业的数据请求库已经封装了所有最佳实践，自动处理提前请求、缓存、重复请求抑制、卸载时取消请求等问题，代码更简洁可靠：

import { useQuery } from '@tanstack/react-query';

function Pizzeria() {
  const { data: pizzas, error, isLoading } = useQuery({
    queryKey: ['pizzas'], // 缓存的唯一标识
    queryFn: fetchPizzas, // 请求函数
    // 可选配置：设置缓存过期时间、预取策略等
  });

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;
  
  return (
    <div>
      {pizzas.map(pizza => <Pizza pizza={pizza} key={pizza.id} />)}
    </div>
  );
}

潜在陷阱 #

• 重复请求：组件如果因为父组件更新而重新渲染，顶层的请求会重复触发，必须用useRef标记请求状态；
• 卸载后更新状态：请求完成时组件可能已经卸载，直接调用setState会触发React警告，需要通过isMounted标记或AbortController取消请求；
• SSR冲突：服务器渲染时，顶层请求会在服务端执行，客户端渲染时又会重复发起，需要做同构处理（比如服务端预取数据并传递给客户端）；
• props依赖问题：如果请求依赖组件的props，直接在顶层发起的话，props变化时不会自动重新请求，需要结合useEffect监听props变化并重新触发请求。

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