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

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

当 useEffect 的依赖数组为空（[]）时，副作用函数只会在组件首次挂载时执行一次，在卸载时执行清理函数（如果有）。而如果没有提供依赖数组，useEffect 会在每次组件渲染后都执行副作用函数。

解析：

• useEffect(() => { ... }, [])：空依赖数组表示该 effect 不依赖任何响应式变量，因此 React 仅在组件挂载时运行一次，在卸载时调用返回的清理函数（如果存在）。这类似于类组件中的 componentDidMount 和 componentWillUnmount。
• useEffect(() => { ... })：没有依赖数组时，React 无法判断何时应重新运行 effect，因此默认在每次渲染后都执行。这可能导致性能问题或无限循环（例如在 effect 中修改状态）。

正确使用依赖数组对避免 bug 和优化性能至关重要。建议始终显式声明依赖项，并借助 ESLint 的 react-hooks/exhaustive-deps 规则来避免遗漏依赖。