React Router中useEffect重复触发问题的分析与解决

问题现象

在使用React Router进行页面导航时，开发者发现useEffect钩子出现了意外的重复触发行为。具体表现为：

1. 在开发环境下，当从首页导航到测试页面时，useEffect内的fetch请求会被触发两次
2. 在生产环境下，当通过浏览器后退按钮返回测试页面时，也会触发一次额外的fetch请求

根本原因分析

开发环境下的重复触发

这种现象主要源于React的严格模式(Strict Mode)。React在开发环境下会故意重复执行某些生命周期方法和钩子，包括：

• 组件渲染
• useEffect回调
• 初始化逻辑

这是为了帮助开发者发现潜在的问题，比如不纯的渲染或副作用。严格模式会模拟组件卸载和重新挂载的行为，确保代码能够正确处理这些情况。

生产环境下的后退触发

当用户通过浏览器后退按钮返回页面时，React Router会重新渲染该路由对应的组件。这属于正常行为，因为：

1. 页面组件确实被重新挂载
2. 路由状态可能已经发生变化
3. 组件可能需要根据新的路由参数或状态进行更新

解决方案

针对严格模式的解决方案

如果确实需要在开发环境下避免重复执行，可以考虑以下方法：

1. 移除严格模式：可以自定义客户端入口文件(entry.client.tsx)，不包裹StrictMode组件
2. 使用ref控制执行：通过useRef标记首次执行，避免重复副作用

const effectRan = useRef(false);
useEffect(() => {
  if (effectRan.current) return;
  effectRan.current = true;
  // 你的副作用代码
}, []);

针对路由导航的优化

对于生产环境下导航导致的重复请求：

1. 使用数据加载器：考虑使用React Router提供的数据加载API，如loader
2. 实现缓存策略：对fetch请求结果进行缓存，避免重复请求相同数据
3. 使用防抖/节流：对频繁触发的副作用进行控制

最佳实践建议

1. 副作用应该设计为幂等的，能够安全地多次执行
2. 对于数据请求，考虑添加取消逻辑或竞态处理
3. 充分利用React Router提供的数据管理功能
4. 在开发阶段接受严格模式的检查，而不是规避它

总结

React Router与React的严格模式共同作用导致了useEffect的重复触发现象。这实际上是框架有意为之的设计，旨在帮助开发者编写更健壮的代码。理解这些行为背后的原理，能够帮助开发者更好地组织组件逻辑，编写出更可靠的应用程序。