React 组件为什么会渲染两次

在 App.tsx 中打印日志发现这段日志在浏览器控制台输出了两次

function App() {
    console.log("加载 App.tsx ")
    return (
        <h1>Hello</h1>
    );
}

export default App;

原因是在 index.tsx 中的这段代码，使用了 StrictMode 严格模式

root.render(
    // 使用了 StrictMode 严格模式
    <React.StrictMode>
        <App/>
    </React.StrictMode>
);

StrictMode 目前有助于：

• 识别具有不安全生命周期的组件
• 有关旧式字符串ref用法的警告
• 检测意外的副作用
• 检测遗留 context API

StrictMode 并不影响最终的打包运行，但是如果不希望开发阶段受到影响可以将其去掉

root.render(
    // 取消了 StrictMode 严格模式
    <>
        <App/>
    </>
);