React的useEffect为什么经常执行两次？

React的useEffect为什么经常执行两次？*

引言

在使用React开发应用时，许多开发者都会遇到一个看似奇怪的现象：useEffect钩子在某些情况下会执行两次。这种现象在开发模式下尤其常见，而在生产模式下则通常不会出现。对于初次接触React或对React内部机制理解不深的开发者来说，这可能会引发困惑甚至导致错误的调试方向。本文将深入探讨这一现象的根本原因，分析React的设计理念，并解释为什么这种行为实际上是React团队有意为之的优化策略。

主体

1. useEffect的基本行为

首先，我们需要明确useEffect的基本工作原理。useEffect是React Hooks中用于处理副作用的核心API，它的执行时机是在组件渲染完成之后。根据依赖项的不同，useEffect的执行可以分为以下几种情况：

无依赖数组：每次渲染后都会执行
空依赖数组：仅组件挂载时执行一次
有依赖项：依赖项变化时执行

然而，即便是在空依赖数组的情况下，开发者有时也会观察到useEffect被执行两次，这与预期不符。这种现象主要发生在React 18及更高版本的开发模式下。

2. React 18的严格模式(Strict Mode)

React 18引入了一个重要的变化：在开发模式下默认启用了严格模式(Strict Mode)。严格模式会故意让你的组件挂载两次，以此来帮助发现潜在的问题。这种行为的目的是：

检测不纯的渲染（如直接修改props或state）
验证effect的清理函数是否正确实现
发现意外的副作用

当组件挂载两次时，相关的useEffect也会随之执行两次。这是React团队故意设计的，目的是帮助开发者在早期发现并修复问题，而不是等到生产环境中才暴露出来。

3. 双重渲染的深层机制

React 18的双重渲染机制实际上是一种"mount → unmount → remount"的过程。具体来说：

首次渲染和挂载组件
执行所有effect（第一次执行）
React立即卸载组件
执行所有effect的cleanup函数
重新挂载组件（第二次执行effect）

这种机制确保了你的组件能够正确处理"挂载→卸载→重新挂载"的生命周期，这在现实应用中是很常见的场景（如用户在页面间快速导航）。

4. 为什么只在开发模式下？

这种双重渲染行为仅限于开发模式，原因如下：

性能考量：双重渲染会增加额外的计算开销
调试目的：生产环境不需要这种严格的检查
用户体验：不应该影响最终用户的体验

React团队通过这种方式在开发阶段模拟了更严格的环境，帮助开发者提前发现潜在问题。

5. 实际案例分析

让我们通过几个具体例子来说明这种现象：

案例1：空依赖数组

javascript 复制代码

useEffect(() => {
  console.log("Effect ran");
  return () => console.log("Cleanup ran");
}, []);

在开发模式下，你会看到以下输出：

复制代码

Effect ran
Cleanup ran
Effect ran

案例2：API调用

javascript 复制代码

useEffect(() => {
  fetchData();
}, []);

这种代码在开发模式下会触发两次API调用，可能导致意外的副作用。正确的做法应该是添加取消逻辑：

javascript 复制代码

useEffect(() => {
  const controller = new AbortController();
  
  fetchData({ signal: controller.signal });
  
  return () => controller.abort();
}, []);

6. 如何正确处理双重执行

为了避免双重执行带来的问题，开发者应该：

确保effect有正确的清理函数
对于幂等操作（如日志记录）可以忽略重复执行
对于非幂等操作（如POST请求）应该添加防护
使用refs来跟踪effect是否已经执行过

7. 设计哲学探讨

React团队选择这种设计有几个深层次的考虑：

可恢复性：确保组件能在任何时刻被正确地重新挂载
一致性：开发环境尽可能模拟生产环境的边缘情况
可预测性：通过严格模式暴露潜在问题，而不是隐藏它们

这种设计鼓励开发者编写更健壮的代码，能够处理各种边界情况。

8. 性能优化技巧

虽然双重渲染在开发模式下是有意的行为，但我们仍可以通过一些技巧来优化性能：

使用useMemo和useCallback减少不必要的重新计算
将大型effect拆分为多个小型effect
合理设置依赖数组，避免过度触发
考虑使用useLayoutEffect处理必须同步执行的副作用

9. 常见误解澄清

关于useEffect的双重执行，有几个常见的误解需要澄清：

这不是bug：这是React团队有意为之的设计
不影响生产环境：生产构建会自动禁用这种行为
不是所有effect都会执行两次：只有某些特定情况下才会出现
不是React 18特有的：早期版本在某些配置下也有类似行为

10. 与其他框架的对比

对比其他主流框架的处理方式：

Vue：在开发模式下也有类似的警告机制，但不会强制双重执行
Angular：依赖变更检测策略，开发模式下的行为差异较小
Svelte：编译时优化，较少出现运行时意外行为

React的选择体现了其"显式优于隐式"的设计哲学。

总结

useEffect在开发模式下的双重执行行为是React团队精心设计的功能，旨在帮助开发者提前发现并解决潜在的问题。理解这一行为背后的设计理念和实现机制，有助于我们编写更健壮、更可靠的React组件。作为开发者，我们应该：

接受并理解这种设计选择
确保effect逻辑具备幂等性或正确的清理机制
利用严格模式提高代码质量
区分开发和生产环境的行为差异

通过这种方式，我们可以充分利用React提供的开发工具，构建出更高质量的应用程序。记住，React的这些"看似奇怪"的行为背后，往往有着深思熟虑的设计考量。