React性能优化：匿名函数与useCallback缓存的权衡分析

一、匿名函数的利弊 #

• 优点：写法简洁直观，无需额外命名函数；能直接捕获当前作用域的变量（比如循环中的元素ID），逻辑一目了然。
• 缺点：每次组件重渲染都会生成新的函数实例，若传递给React.memo/PureComponent包裹的子组件，会触发子组件不必要的重渲染；大量重复创建函数会带来微小的内存开销（普通场景可忽略，极端大量元素时需注意）。

二、场景一：单个按钮的点击事件 #

先看你的代码：

import React, { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

 const onClickCount = useCallback(() => {
    setCount(count + 1)
  }, [count]);

  return (
    <div>
      <button onClick={onClickCount}>
        Click
      </button>
    </div>
  );
}

问题分析 #

这里useCallback的依赖是count，每次count递增，useCallback都会返回新的函数实例——和直接写onClick={() => setCount(count + 1)}完全没有区别，因为依赖更新导致缓存失效，每次重渲染都要生成新函数。

这种情况下用useCallback完全没意义，反而多了一层缓存判断的开销（虽然极小）。两种写法的性能几乎一致，甚至直接写匿名函数还少了useCallback的内部处理，效率略高。

优化方向 #

如果要让useCallback真正发挥作用，可以用函数式更新，摆脱对count的依赖：

const onClickCount = useCallback(() => {
  setCount(prevCount => prevCount + 1)
}, []);

此时函数只会创建一次，但对于单个原生按钮来说，这个优化的收益微乎其微——React对原生DOM组件的事件处理有优化，不会因为回调函数变化触发额外重渲染。

三、场景二：循环生成的按钮列表 #

你的代码如下：

import React, { useState, useCallback } from 'react';

const data = [
   {id: "1", text: "Foo"},
   {id: "2", text: "Bar"}
]

function Example() {
  const [lastSelected, setLastSelected] = useState(undefined);

 const onClickUpdate = useCallback((id) => {
    setLastSelected(id)
  }, [lastSelected]);

  return (
    <div>
       {data.map((e) => 
         (<button onClick={() => onClickUpdate(e.id)}>
           {e.text}
         </button>)
       )}
       Last selected: {lastSelected}
    </div>
  );
}

问题分析 #

1. 匿名函数的性能影响：循环里的() => onClickUpdate(e.id)确实会在每次重渲染创建新函数，但对于原生button组件，这种影响可以忽略——原生组件没有shouldComponentUpdate逻辑，不会因为回调变化触发重渲染。只有当列表项是React.memo包裹的自定义组件时，才可能导致子组件重复渲染。
2. 当前useCallback的无效性：onClickUpdate的依赖是lastSelected，每次选中项变化，onClickUpdate都会生成新函数，循环里的匿名函数又依赖它，最终还是每次重渲染都生成新的匿名函数，缓存完全没生效。

优化方向 #

先修正useCallback的依赖（这里setLastSelected不需要依赖lastSelected）：

const onClickUpdate = useCallback((id) => {
  setLastSelected(id)
}, []); // 依赖为空，函数仅创建一次

但循环里的匿名函数还是会每次生成，不过对于少量列表项（比如示例里的2个），完全不用在意。如果是上千条数据的大列表，且列表项是自定义memo组件，可以把id作为props传给子组件，让子组件自行绑定点击逻辑，避免父组件传递匿名回调。

四、两个场景的性能对比 #

两个场景的性能差异极小，几乎感知不到。场景二每次重渲染多创建1个匿名函数，但这种级别的开销在浏览器中完全可以忽略。只有当场景二的列表项数量极大（上千条）且是memoized自定义组件时，才可能比场景一出现更明显的性能问题。

总结 #

1. 匿名函数的核心问题不是创建开销，而是导致memoized子组件不必要重渲染，如果只是传给原生DOM组件，不用纠结。
2. useCallback只有在函数依赖稳定，且传递给memoized子组件时才有用，否则反而增加不必要的开销。
3. 优先保证代码可读性，不要过度优化，只有实际出现性能瓶颈时再考虑这类优化手段。

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