在 React 中，为什么不能在 useEffect 的依赖数组中遗漏实际使用的状态或 props？

在 React 中，为什么不能在 useEffect 的依赖数组中遗漏实际使用的状态或 props？

回答与解析：
在 React 的 useEffect Hook 中，依赖数组（dependency array）用于告诉 React 该 effect 依赖于哪些变量。如果 effect 中使用了某个状态（state）或 props，但没有将其包含在依赖数组中，会导致 effect 闭包中捕获的是该变量的“过时值”（stale closure），从而引发难以调试的 bug。

例如：

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

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count); // 始终输出 0
    }, 1000);
    return () => clearInterval(id);
  }, []); // ❌ 缺少 count 依赖

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

在这个例子中，useEffect 的依赖数组为空，因此 effect 只在组件挂载时运行一次，并捕获了 count 的初始值 0。即使 count 更新，setInterval 中的回调仍引用旧的 count，导致始终输出 0。

正确做法：将所有 effect 中使用的响应式值（state、props、函数等）都加入依赖数组：

useEffect(() => {
  const id = setInterval(() => {
    console.log(count);
  }, 1000);
  return () => clearInterval(id);
}, [count]); // ✅

但频繁依赖 count 会导致定时器频繁清除和重建，更优解是使用函数式更新或 useRef 同步最新值，或使用 useReducer + dispatch 避免依赖问题。

核心原则：React 团队强调“依赖数组必须完整”，可以借助 ESLint 插件 eslint-plugin-react-hooks 自动检测遗漏依赖，确保代码行为符合预期。