React 中使用 useCallback 时正确管理依赖项以实现状态切换

在 React 里，如果用 useCallback 包住一个依赖组件 state 的事件处理函数，却没有把这个 state 一并写进依赖数组，问题就来了：闭包会一直拿着初始的 state 值不放，结果看起来就像状态更新只成功了一次。解决办法其实很直接，把函数真正依赖的 state 变量，比如 dark，明确加到 useCallback 的依赖数组里即可。

在 React 中，若用 useCallback 包裹依赖组件 state 的事件处理函数却未将其加入依赖数组，会导致闭包捕获初始 state 值，使状态更新仅生效一次。修复方式是将所依赖的 state 变量（如 `dark`）显式添加到 useCallback 的依赖数组中。

问题的症结，其实就卡在 useCallback 的依赖机制上：当依赖数组写成空（[]）时，这个回调函数只会在组件第一次渲染时创建一次，后面会一直复用。同样被“定格”的，还有当时闭包里拿到的 dark——它停留在初始值 true。结果就是，!dark 每次算出来都始终是 false，于是 setDark(false) 会一遍遍执行，但状态并不会再从 false 切回去。

✅ 正确写法是将 dark 加入依赖数组：

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 (
{dark ? 'dark mode' : 'light mode'}

);
}

⚠️ 注意事项：

• 优先使用函数式更新：setDark(prev => !prev) 比 setDark(!dark) 更健壮，它不依赖闭包中的 dark 值，即使 useCallback 依赖遗漏也不会出错；
• 依赖数组必须完整：只要回调内引用了响应式值（state、props、其他 hooks 返回值），就必须列入依赖项，否则将引发 stale closure（陈旧闭包）问题；
• 可选优化：若逻辑简单，也可直接省略 useCallback——现代 React 对简单内联函数的性能影响极小，过度优化反而增加维护成本。

总结：useCallback 不是为了“让函数能多次执行”，而是为了控制何时重新创建函数；其依赖数组必须真实反映函数内部所读取的所有响应式值，否则将破坏 React 的响应性模型。