useEffect内外定义函数的差异、清理方法及适用场景

先看你给出的两种实现代码：

Option 1：函数定义在useEffect外部 #

const [data, setData] = useState(null);
  
const getData = async () => {
  try {
    const response = await fetch("https://catfact.ninja/fact");
    const result = await response.json();
    setData(result);
  } catch(error) {

  }
};

useEffect(() => {
  getData();
}, [])

return (
  <>
   <h1>{data?.fact}</h1>
  </>
)

Option 2：函数定义在useEffect内部 #

const [data, setData] = useState(null);
useEffect(() => {
  const getData = async () => {
    try {
      const response = await fetch("https://catfact.ninja/fact");
      const result = await response.json();
      setData(result);
    } catch(error) {

    }
  };

  getData();
}, [])

return (
  <>
   <h1>{data?.fact}</h1>
  </>
)

一、两种写法的核心差异 #

1. 函数复用性与作用域 #

• Option1的getData定义在组件顶层，整个组件内部都能调用它（比如加个按钮点击重新获取数据），但组件每次渲染时都会重新创建这个函数实例（除非用useCallback缓存）。
• Option2的getData是useEffect回调的内部函数，只能在这个effect里执行，组件渲染时不会重复创建它（因为空依赖的effect只在挂载时执行一次）。

2. 依赖项管理问题 #

• Option1如果不做优化，ESLint会提示useEffect的依赖数组缺失getData；如果把getData加入依赖，因为每次渲染getData都是新函数，会导致effect每次渲染都触发，引发不必要的请求。解决这个问题需要用useCallback包裹getData，固定函数引用。
• Option2的getData在effect内部，不存在依赖项的问题，不需要考虑加入effect的依赖数组。

3. 变量捕获特性 #

• Option1的getData每次渲染都是新的，会捕获当前渲染周期的state、props值；如果异步请求完成时组件已经多次渲染，它拿到的是创建时的那个版本的变量。
• Option2的getData只在挂载时创建，捕获的是组件挂载瞬间的state、props值，后续即使state更新，这个内部函数也拿不到最新值（不过因为是空依赖effect，只执行一次，这个问题在当前场景下影响不大）。

二、清理函数的实现方式 #

两种写法都需要处理组件卸载后异步请求仍在进行，导致setData触发内存泄漏的问题，通常用AbortController来取消请求。

Option1的清理实现 #

需要给getData传入取消信号，同时用useCallback缓存函数避免effect重复触发：

const [data, setData] = useState(null);

// 用useCallback固定函数引用
const getData = useCallback(async (signal) => {
  try {
    // 把signal传入fetch配置
    const response = await fetch("https://catfact.ninja/fact", { signal });
    const result = await response.json();
    setData(result);
  } catch(error) {
    // 忽略取消请求导致的错误
    if (error.name !== 'AbortError') {
      console.error('请求失败:', error);
    }
  }
}, []);

useEffect(() => {
  const controller = new AbortController();
  getData(controller.signal);
  
  // 组件卸载时取消请求
  return () => controller.abort();
}, [getData]) // 依赖缓存后的getData

Option2的清理实现 #

直接在effect内部创建AbortController，内部函数可以直接访问这个控制器，逻辑更紧凑：

const [data, setData] = useState(null);
useEffect(() => {
  const controller = new AbortController();
  
  const getData = async () => {
    try {
      const response = await fetch("https://catfact.ninja/fact", { signal: controller.signal });
      const result = await response.json();
      setData(result);
    } catch(error) {
      if (error.name !== 'AbortError') {
        console.error('请求失败:', error);
      }
    }
  };

  getData();
  
  // 组件卸载时取消请求
  return () => controller.abort();
}, [])

三、适用场景 #

选Option1的情况 #

• 需要在组件多个地方触发数据获取（比如点击按钮刷新、表单提交后重新拉取数据）；
• 数据获取逻辑需要复用（比如多个组件都用同样的请求逻辑，可以抽离到自定义hook，而Option1的写法更容易抽离）；
• 方便单独测试这个数据获取函数。

选Option2的情况 #

• 数据只需要在组件挂载时获取一次，不需要其他地方触发；
• 想避免依赖项管理的麻烦，减少不必要的函数创建，让代码更聚焦在“挂载时执行一次”的逻辑上。

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