React 18升级后锚点点击触发两次Analytics页面加载问题求助

1. 检查路由库与React 18的兼容性 #

如果使用了react-router类路由库，确认是否同步升级到适配React 18的版本（比如react-router v6.3+）。React 18的渲染机制变化可能导致旧版路由库在hash变化时触发两次location更新回调——比如useLocation的监听逻辑重复执行，进而触发两次Analytics上报。

2. 排查Analytics上报的触发逻辑 #

• 检查是否同时监听了路由位置变化和原生hashchange事件：React路由内部已经会处理hash跳转的路由更新，若额外绑定原生hashchange监听，会导致两次上报触发。
• 查看上报代码的useEffect依赖项：如果依赖项设置不当（比如依赖空数组但内部引用了外部可变变量，或依赖项未包含location），可能导致回调重复执行；或者是否存在重复订阅的情况（比如每次组件渲染都重新添加监听）。

3. 分析React 18的渲染行为影响 #

• 确认是否因**自动批处理（Automatic Batching）**导致事件触发时机变化：React 18会自动批处理更多场景的状态更新，可能让hash变化的事件与其他状态更新的回调被合并执行，但上报逻辑未做去重处理。
• 检查是否误用useLayoutEffect：useLayoutEffect会在DOM更新后同步执行，若上报逻辑放在这里，可能早于路由的useEffect回调触发，与路由更新的上报形成两次触发。

4. 锚标签的点击事件排查 #

• 检查锚标签是否存在重复的点击绑定：比如既有React组件的onClick处理，又有全局的点击事件监听，或路由组件的事件冒泡导致重复触发上报逻辑。
• 确认是否在自定义点击逻辑中手动修改hash并未正确阻止默认行为：比如onClick里调用window.location.hash = xxx但未preventDefault()，导致浏览器默认的hash跳转和手动修改各触发一次路由更新。

5. 调试定位具体原因 #

• 在Analytics上报函数中添加调用栈日志（比如console.trace()），对比两次上报的调用来源，明确是路由回调、原生事件还是其他逻辑触发。
• 使用React DevTools的Profiler工具，确认组件实际渲染次数，验证是否是上报逻辑重复触发而非组件重复渲染。
• 临时注释路由相关上报或原生hashchange监听，逐一排查哪个逻辑导致重复。

内容的提问来源于stack exchange，提问作者Ashok Yaganti