React渲染的HTML值与console.log输出不一致是什么原因？

问题原因 #

这个现象是React 18+ 开发环境严格模式和React DevTools 日志过滤共同作用的结果：

• 目前绝大多数 React 脚手架（Create React App、Next.js、Vite React 模板等）默认会给根组件包裹 <React.StrictMode> 严格模式标签。为了提前检测组件中不规范的副作用写法，开发环境下严格模式会主动对组件执行「挂载→卸载→重新挂载」的两次初始化流程，你传入 useState 的初始化函数 getInitialValue 也会被调用两次，每次都会生成不同的随机数。
• 你安装的 React DevTools 浏览器插件默认开启了「隐藏严格模式重复日志」的功能，第二次挂载生成的 initial value is 33、Rendering a random value of 33 日志被自动过滤隐藏，你在控制台只能看到第一次执行时输出的91相关日志。
• 第二次挂载完成后的状态才是页面最终的渲染结果，所以页面上显示的是第二次生成的33。

验证方法 #

你可以通过以下操作复现完整流程：

1. 打开 Chrome 控制台的设置面板，关闭「Hide logs during second render in Strict Mode」（严格模式下二次渲染隐藏日志）的选项，或者临时禁用 React DevTools 插件。
2. 刷新页面，就能看到两次完整的执行日志，91和33的输出都会出现。

解决方案 #

• 这个差异只会出现在开发环境，生产环境下严格模式不会执行两次挂载逻辑，不会出现日志和页面不一致的问题，不影响线上运行。
• 如果需要彻底避免初始化函数多次执行，可以把随机值生成逻辑移到 useEffect 中：

function MyRandom() {
  const [randomValue, setRandomValue] = React.useState<number | null>(null);  

  React.useEffect(() => {
    const initialValue = Math.floor(Math.random() * 100);
    console.log(`initial value is ${initialValue}`);
    setRandomValue(initialValue);
  }, []);

  if (randomValue === null) return null;
  console.log(`Rendering a random value of ${randomValue}`);
  return <p>Random value: {randomValue}</p>
}

• 如果不需要严格模式的检测能力，也可以直接去掉根组件外的 <React.StrictMode> 包裹，开发环境也不会出现两次渲染的情况。

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