在 React 中，为什么使用 useEffect 时依赖数组为空（[]）会导致只在组件挂载时执行一次，而依赖数组包含某个状态变量时却可能频繁触发副作用？

在 React 中，为什么使用 useEffect 时依赖数组为空（[]）会导致只在组件挂载时执行一次，而依赖数组包含某个状态变量时却可能频繁触发副作用？

回答与解析：

useEffect 是 React 的一个 Hook，用于在函数组件中执行副作用（如数据获取、订阅、手动 DOM 操作等）。它的执行时机由第二个参数——依赖数组（dependency array）决定。

• 当依赖数组为空（[]）时，React 会认为该 effect 不依赖任何外部变量，因此只在组件首次挂载（mount）时执行一次，并在组件卸载（unmount）时执行清理函数（如果有返回）。这类似于类组件中的 componentDidMount 和 componentWillUnmount 的组合。

• 当依赖数组中包含某个状态（如 [count]），React 会在每次渲染后比较该依赖项的值是否发生变化（使用 Object.is 进行浅比较）。如果发生变化，就会重新执行该 effect。因此，如果状态频繁更新（例如用户频繁点击按钮导致 count 变化），useEffect 就会频繁触发。

关键点：

• useEffect 的依赖数组决定了 effect 的重新执行条件。
• 空依赖数组 = 仅挂载时执行一次。
• 非空依赖数组 = 依赖项变化时重新执行。
• 忘记将 effect 中使用的状态或 props 加入依赖数组，可能导致闭包陷阱（stale closure），即 effect 中引用的是过时的值。

最佳实践： 始终确保 effect 中使用的所有外部变量（包括状态、props、函数等）都显式列在依赖数组中，或使用 useCallback/useMemo 稳定函数引用以避免不必要的重复执行。可以借助 ESLint 插件（如 react-hooks/exhaustive-deps）来自动检测依赖缺失问题。