在 React 中，为什么不能在 useEffect 的依赖数组中省略一个被使用的 props 或 state？

在 React 中，为什么不能在 useEffect 的依赖数组中省略一个被使用的 props 或 state？

回答与解析：
在 React 的 useEffect Hook 中，依赖数组的作用是告诉 React 该 effect 依赖于哪些外部值。如果 effect 函数中使用了某个 state 或 props，但没有将其添加到依赖数组中，就会导致闭包陷阱（stale closure）问题。

原因：
useEffect 会在组件首次渲染时捕获其作用域内的变量值。如果依赖项缺失，即使该变量在后续渲染中发生了变化，effect 仍然会使用初次渲染时的旧值，因为它没有被重新创建。这会导致逻辑错误，比如事件处理失效、状态不同步、无限循环（如果反过来又去更新状态）等。

示例（错误）：

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // userId 没有在依赖数组中，导致始终使用初始值
    fetch(`/api/user/${userId}`)
      .then(res => res.json())
      .then(setData);
  }, []); // 缺少 userId

  return <div>{data?.name}</div>;
}

正确写法：

useEffect(() => {
  fetch(`/api/user/${userId}`)
    .then(res => res.json())
    .then(setData);
}, [userId]); // 显式声明依赖

React 官方推荐使用 ESLint 插件 eslint-plugin-react-hooks，它会自动检测并警告缺失的依赖项，帮助开发者避免此类问题。此外，如果某些值确实不需要触发 effect，应通过 useCallback、useRef 或逻辑重构等方式合理处理，而不是直接忽略依赖。