在 React 中，为什么不能在 useEffect 的依赖数组中遗漏某个实际使用的变量？

在 React 中，为什么不能在 useEffect 的依赖数组中遗漏某个实际使用的变量？

回答与解析：
因为在 useEffect 中如果使用了某个响应式变量（如 state 或 props），但未将其加入依赖数组，会导致 effect 闭包中捕获的是该变量的过期值（stale closure）。这会引发难以调试的 bug，例如状态不同步、事件处理逻辑错误等。

React 的 useEffect 遵循“依赖完整性”原则：所有在 effect 函数体内引用的外部作用域变量（包括 props、state、函数等）都必须显式声明在依赖数组中。否则，effect 将无法感知这些变量的变化，从而不会重新执行，造成逻辑失效。

例如：

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

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count); // 若 count 不在依赖数组中，始终输出初始值 0
    }, 1000);
    return () => clearInterval(id);
  }, []); // ❌ 错误：缺少 count 依赖

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

正确做法是将 count 加入依赖数组，并配合清理函数或使用 useRef 等方式避免频繁重建定时器。此外，可借助 ESLint 插件 react-hooks/exhaustive-deps 自动检测此类问题。