在 React 中，若用 useCallback 包裹依赖组件 state 的事件处理函数却未将其加入依赖数组，会导致闭包捕获初始 state 值，使状态更新仅生效一次。修复方式是将所依赖的 state 变量（如 dark）显式添加到 useCallback 的依赖数组中。
在 react 中，若用 usecallback 包裹依赖组件 state 的事件处理函数却未将其加入依赖数组，会导致闭包捕获初始 state 值，使状态更新仅生效一次。修复方式是将所依赖的 state 变量（如 `dark`）显式添加到 usecallback 的依赖数组中。
问题根源在于 useCallback 的依赖机制：当依赖数组为空（[]）时，回调函数在组件首次渲染时被创建并缓存，此后始终复用——而此时 dark 的值仍为初始值 true。因此 !dark 永远计算为 false，setDark(false) 被反复调用，但状态实际从未从 false 再次翻转。
✅ 正确写法是将 dark 加入依赖数组：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
import React from 'react';
import { useState, useCallback } from 'react';
export default function App() {
const [dark, setDark] = useState(true);
// ✅ 正确：dark 作为依赖，确保每次 dark 变化时生成新函数
const toggleDark = useCallback(() => {
setDark(prev => !prev); // 推荐使用函数式更新，避免依赖外部变量
}, [dark]);
return (
<main>
<p onClick={toggleDark}>{dark ? 'dark mode' : 'light mode'}</p>
</main>
);
}⚠️ 注意事项：
-
优先使用函数式更新：
setDark(prev => !prev)比setDark(!dark)更健壮，它不依赖闭包中的dark值，即使useCallback依赖遗漏也不会出错； - 依赖数组必须完整：只要回调内引用了响应式值（state、props、其他 hooks 返回值），就必须列入依赖项，否则将引发 stale closure（陈旧闭包）问题；
-
可选优化：若逻辑简单，也可直接省略
useCallback——现代 React 对简单内联函数的性能影响极小，过度优化反而增加维护成本。
总结：useCallback 不是为了“让函数能多次执行”，而是为了控制何时重新创建函数；其依赖数组必须真实反映函数内部所读取的所有响应式值，否则将破坏 React 的响应性模型。
