React 中 useEffect 的依赖数组为空（[]）和不传依赖数组有什么区别？

作者: 图恩分类: 编程开发阅读: 3发布时间： 2025-10-31 03:15:10

回答：
useEffect 的依赖数组为空（[]）表示该 effect 仅在组件挂载时执行一次，在卸载时执行清理函数（如果提供了）；而不传依赖数组会导致 effect 在每次渲染后都执行。

解析：

依赖数组为 []：
React 会将该 effect 视为“仅在挂载时运行一次”，类似于 class 组件中的 componentDidMount。它只会在组件首次渲染后执行，并在组件卸载时调用返回的清理函数（如果存在）。这适用于初始化操作，比如订阅事件、获取初始数据等。
不传依赖数组：
如果完全省略第二个参数（即 useEffect(() => {...})），React 会在每次组件重新渲染后都执行该 effect，包括首次挂载。这可能导致性能问题或无限循环（例如在 effect 中修改状态而未限制执行条件）。

示例对比：

// 仅执行一次（挂载时）
useEffect(() => {
  console.log('Mount only');
}, []);

// 每次渲染后都执行
useEffect(() => {
  console.log('Runs on every render');
});

因此，应根据实际需求谨慎选择是否传入依赖数组以及依赖项的内容，避免不必要的重复执行或遗漏依赖导致的 bug。