在 React 中，直接在组件内定义函数会导致每次渲染都生成新函数实例，引发不必要的重渲染；应使用 useCallback 将函数记忆化，并确保其依赖项稳定，从而提升性能与稳定性。
在 react 中，直接在组件内定义函数会导致每次渲染都生成新函数实例，引发不必要的重渲染；应使用 `usecallback` 将函数记忆化，并确保其依赖项稳定，从而提升性能与稳定性。
在 React 函数组件中，若将事件处理函数（如 myFunction(item) => setExample(item)）直接写在组件主体内，它会在每次渲染时被重新创建——即使逻辑完全相同，其引用也不同。这不仅使 useCallback 或 useMemo 失效，还可能在子组件接收该函数作为 prop 时触发无意义的更新（尤其配合 React.memo 时），严重时导致无限循环渲染或应用崩溃。
关键误区在于：不能对组件内部动态声明的函数做有效记忆化。例如以下写法是无效的：
const MyComponent = () => {
const [example, setExample] = useState({});
// ❌ 错误：myFunction 每次渲染都是新函数，useCallback 无法稳定缓存
const myFunction = (item) => setExample(item);
const memoizedFn = useCallback(myFunction, [myFunction]); // 依赖项本身不稳定！
return array.map(item => <p key="{item.id}">{/* ... */}</p>);
};
✅ 正确做法是 将函数提取为稳定引用的顶层常量，再通过 useCallback 绑定其依赖项（如 setExample）：
// ✅ 提取为模块级常量（不依赖闭包，身份稳定）
const updateExample = (item, setExample) => setExample(item);
const MyComponent = () => {
const [example, setExample] = useState({});
// ✅ 使用 useCallback 记忆化：传入稳定函数 + 稳定依赖
const handleUpdate = useCallback(
(item) => updateExample(item, setExample),
[setExample] // 仅需依赖 setExample（useState 返回的函数是稳定的）
);
const array = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
return (
<div>
{array.map(item => (
<p key="{item.id}">
<button onclick="{()"> handleUpdate(item)}>
更新为 {item.name}
</button>
</p>
))}
</div>
);
};
⚠️ 注意事项：
- 不要在 map 循环体内直接调用 handleUpdate(item) 并尝试渲染其返回值（如原问题中的
{test}
）：handleUpdate 是一个副作用函数（执行 setExample），它不返回可渲染内容，且在 render 阶段调用状态更新会触发立即重渲染，极易造成无限循环。 - 若需在渲染中展示数据，请基于 example 状态变量派生 UI，而非在 map 中执行状态变更。
- useCallback 的依赖数组必须完整包含函数体中使用的响应式值（如 setExample）。React 官方推荐开启 eslint-plugin-react-hooks 自动校验。
- 对于简单场景，也可内联定义并直接 useCallback，但需确保不引入不稳定依赖：
const handleUpdate = useCallback( (item) => setExample(item), // 内联函数，但依赖 setExample [setExample] );
总结：记忆化函数的核心是「稳定引用 + 显式依赖」。优先用 useCallback（语义明确、专为函数设计），避免误用 useMemo 包裹函数（虽技术可行，但违背 Hook 设计意图）。提取纯函数、精简依赖项、杜绝 render 中触发状态变更，是构建高性能 React 组件的基石。
