React组件内函数执行两次（含VM前缀日志）如何解决？

问题原因 #

你遇到的重复日志（包括VM前缀的记录）是**React开发环境下的严格模式（Strict Mode）**导致的。严格模式会强制组件函数和部分钩子执行两次，用来检测代码中的意外副作用——你的["hello", "hi"].forEach(printer)直接写在组件函数体内，每次组件渲染都会执行，所以严格模式下组件渲染两次，这段代码就会跑两次：一次是源文件代码执行，另一次是React严格模式的二次执行（日志显示VM开头的记录）。

解决方法 #

方法1：移除严格模式（最简单直接） #

找到项目的根渲染文件（通常是src/index.jsx或src/main.jsx），去掉包裹<App />的<React.StrictMode>标签即可。

修改前的根文件代码示例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

修改后：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

这样开发环境下组件只会渲染一次，forEach也只会执行一次，日志就不会重复。

方法2：将代码放到useEffect钩子中（保留严格模式） #

如果不想关闭严格模式，把有副作用的代码（比如这个forEach执行）放到useEffect钩子中，并设置空依赖数组，确保代码只在组件挂载时执行一次（生产环境下只会执行一次；开发环境严格模式下会模拟卸载再挂载，可能仍会执行两次，但这是严格模式的检测机制，属于正常现象）。

修改后的App.jsx代码：

import React, { useEffect } from 'react';

function App() {
    function printer(e){
        console.log(e);
    }

    useEffect(() => {
        // 将forEach执行放到useEffect内
        ["hello", "hi"].forEach(printer);
    }, []); // 空依赖数组：仅在组件挂载时执行

  return (
    <div>
        Hello
    </div>
  );
}

export default App;

补充说明 #

生产环境下React会自动关闭严格模式的双重渲染逻辑，所以即使你保留严格模式标签，打包部署后代码也只会执行一次，不会出现重复日志。

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