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

作者: 图恩分类: 编程开发阅读: 5发布时间： 2025-10-31 01:18:16

回答：
当 useEffect 的依赖数组为空（[]）时，副作用函数只在组件首次挂载时执行一次，卸载时执行清理函数（如果有的话）；而如果不传依赖数组，useEffect 会在每次组件重新渲染后都执行副作用函数。

解析：
useEffect 的第二个参数是依赖数组，用于控制副作用的执行时机：

依赖数组为 []：React 会将此 effect 视为“仅在挂载和卸载时运行”，类似于类组件中的 componentDidMount 和 componentWillUnmount。由于数组为空，React 认为没有依赖项会发生变化，因此不会在后续渲染中重新执行该 effect。
不传依赖数组（即 useEffect(fn)）：React 无法进行依赖比较，因此会在每次渲染后都执行该 effect。这可能导致性能问题，甚至无限循环（例如 effect 中修改了状态而触发重新渲染）。

例如：

// 只运行一次
useEffect(() => {
  console.log('Mount only');
}, []);

// 每次渲染后都运行
useEffect(() => {
  console.log('Run after every render');
});

因此，最佳实践是始终明确提供依赖数组，并确保它包含 effect 中使用的所有响应式值（props、state、函数等），以避免 bug 或不必要的执行。React 官方也推荐使用 ESLint 插件（如 react-hooks/exhaustive-deps）来帮助检查依赖是否完整。