React 中的 useEffect 为什么在每次渲染后都会执行？如何避免不必要的执行？

作者: 图恩分类: 编程开发阅读: 5发布时间： 2025-10-31 04:21:07

回答与解析：

useEffect 默认在每次组件渲染后都会执行，这是因为它旨在处理副作用（如数据获取、订阅、DOM 操作等），而这些副作用通常依赖于组件的状态或 props。每次渲染可能意味着依赖项发生了变化，因此需要重新运行副作用逻辑。

但并非所有 useEffect 都需要每次都执行。为了避免不必要的执行，可以通过传递依赖项数组（dependency array）作为 useEffect 的第二个参数：

useEffect(() => {
  // 副作用逻辑
}, [dependency1, dependency2]);

如果依赖项数组为空（[]），则 useEffect 仅在组件挂载和卸载时执行一次（类似 class 组件中的 componentDidMount 和 componentWillUnmount）。
如果提供了依赖项，则只有当这些依赖项的值发生变化时，useEffect 才会重新执行。
如果不提供依赖项数组，useEffect 会在每次渲染后执行。

注意事项：

依赖项必须包含 useEffect 内部使用的所有响应式值（state、props、函数等），否则可能读取到过期的闭包值（stale closure）。
对于复杂依赖（如对象、函数），应确保它们的引用稳定性（例如使用 useCallback、useMemo 包装），否则即使逻辑上未变，也会因引用变化而触发重复执行。

通过合理使用依赖项数组，可以精确控制副作用的执行时机，提升性能并避免 bug。