React中useEffect内外定义函数及搭配useCallback的渲染性能差异

开发者阿泽

2026-10-4

四种useEffect函数定义调用场景的渲染与性能差异分析

以下分析基于React 18+版本，默认组件存在正常重渲染场景（如父组件传参变化、内部state更新）。

场景1：在useEffect内部定义函数并调用

useEffect(() => {
  function getBooks() {
    console.log('I get books!');
  }
  getBooks();
}, []);

渲染特性：函数仅在useEffect触发执行时创建，组件普通重渲染不会触发函数重建，仅当useEffect依赖项变化导致effect重新执行时，才会重建一次函数。
性能表现：
- 简单函数：开销可忽略，依赖为空的话仅组件挂载时创建一次，无额外损耗。
- 复杂函数（含大量计算逻辑、闭包引用多个变量）：创建时机和执行时机绑定，没有多余的重渲染重建开销，性能表现好；且闭包捕获的是effect执行时的最新变量，不存在闭包陷阱问题。
- 异步函数：是官方推荐的异步逻辑写法，不需要将异步函数加入effect依赖项，避免了依赖管理混乱导致的重复执行、死循环问题。
适用场景：仅需要在effect触发时执行、不需要在组件其他位置复用的逻辑。

function getBooks() {
  console.log('I get books!');
}
useEffect(() => {
  getBooks();
}, []);

渲染特性：函数会在组件每次重渲染时都重新创建，和函数是否被调用无关。如果函数完全不依赖组件内部的state、props、上下文，可以提到组件作用域外定义，完全避免重渲染重建开销。
性能表现：
- 简单函数：重建开销极小，低频率重渲染场景下几乎感知不到差异。
- 复杂函数：高频率重渲染场景下，每次重建的开销会被放大，性能损耗明显。
- 异步函数：和普通函数逻辑一致，每次重渲染都会重建；如果函数引用了内部state/prop且被加入effect依赖项，每次函数重建都会触发effect重新执行，很容易出现重复请求、死循环问题。
适用场景：函数需要在组件多个位置（如effect、点击事件）复用，且函数逻辑简单、组件重渲染频率低的场景。

const getBooks = useCallback(() => {
  console.log('I get books!');
}, []);

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

渲染特性：仅当useCallback的依赖项变化时，函数才会重建，否则会一直复用之前的函数引用，不会随组件普通重渲染重建。
性能表现：
- 简单函数：属于过度优化，useCallback本身存在内存开销，收益远低于成本。
- 复杂函数：如果函数需要跨渲染复用、作为props传给子组件、或者在组件多个位置调用，这种写法可以避免不必要的函数重建，性能收益明显。
- 异步函数：需要确保useCallback的依赖项填写完整，且将函数加入effect的依赖数组，仅当依赖变化时才会触发effect重新执行，可避免重复请求；但如果异步函数仅在effect内部使用，这种写法没有必要，不如直接在effect内定义。
适用场景：函数需要传给子组件、跨渲染复用、或组件重渲染频率高且逻辑复杂的复用场景。

// 错误写法，违反Hook规则
useEffect(() => {
  const getBooks = useCallback(() => {
    console.log('I get books!');
  }, []);
  getBooks();
}, []);

如果函数仅在effect内部使用，优先选场景1；如果函数需要在组件多个位置复用，简单函数选场景2、复杂函数选场景3；场景4完全不可用。

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