React 中使用 useCallback 时正确管理依赖项以实现状态切换-js教程-PHP中文网

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

在 React 中，若用 useCallback 包裹依赖组件 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 (
    <main><p onclick="{toggleDark}">{dark ? 'dark mode' : 'light mode'}</p>
    </main>
  );
}

⚠️ 注意事项：

React Best Practices 2 0.1.0

React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。

下载

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