React应用为何出现重复日志？VM236日志来源解惑

• 优先排查React严格模式
  React 18开发环境下，<React.StrictMode>会强制双重调用组件函数、副作用钩子（如useEffect），用来提前发现潜在的副作用问题。这是开发环境下重复日志最常见的原因。去根组件里看看有没有包裹这个标签，临时移除后再测试，日志应该会变成单次输出。

• 解析VM前缀日志的来源
  日志里的VM236是浏览器给动态生成代码（比如内联脚本、eval执行的代码）分配的虚拟文件ID。出现这个标识的重复日志，大概率不是你的组件代码触发的：

  • 可能是浏览器扩展注入的代码输出的
  • 也可能是React DevTools这类调试工具的额外输出
    试试禁用所有浏览器扩展，或者用隐身模式打开页面，看重复日志是否消失。

• 验证组件是否真的重复渲染
  就算你简化了当前组件，也可能是父组件重复渲染导致它被多次执行。可以给父组件加日志，或者用React DevTools的Profiler面板，直接查看组件的渲染次数和触发渲染的原因。

• 确认日志是否真的被触发两次
  给日志加个唯一标识，区分是不是真的执行了两次：

  console.log("Just a check log", Date.now(), Math.random());
  

  如果两次日志的时间戳和随机数都不一样，说明组件确实被执行了两次；如果一致，可能是日志被工具重复捕获了。

你提供的简化代码 #

import { HomePresentational } from "../presentational";

export const HomeContainer = () => {
  console.log("Just a check log");

  return <HomePresentational itineraries={[]} />;
};

日志截图 #

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