关于React初始化加载组件会渲染两次的问题

React组件在初始加载时渲染两次：

import React from 'react'
 
export default function App() {
  console.log('被加载')
  return <div>App</div>
}

如上在控制台我们会看到输出了两次’被加载’

出现这种现象的原因是：

由于是使用脚手架创建项目，默认会开启严格模式，在严格模式下，React 的开发环境会刻意执行两次渲染，用于突出显示潜在问题。

如果不想出现这个问题，可以将入口文件中的严格模式去除：

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

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

关于严格模式

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

严格模式检查仅在开发模式下运行；它们不会影响生产构建。

你可以将整个应用程序或者部分组件包裹在 <React.StrictMode> 标签中，来启用严格模式。

import React from 'react';

const App = () => {
  return (
    <React.StrictMode>
      {/* 你的应用程序组件 */}
    </React.StrictMode>
  );
};

export default App;

严格模式会执行以下检查和优化：

1. 检测过时的生命周期方法：React 在未来版本中可能会移除一些过时的生命周期方法。严格模式会在开发中给出警告，帮助你更早地发现和更新你的代码。
2. 检测不安全的生命周期方法：在未来的 React 版本中，某些生命周期方法可能会在异步渲染模式下不再保证同步调用。严格模式下，如果你在 render 方法中使用了 setState，会收到一个警告。
3. 检测废弃的 context API 使用：严格模式会检查是否存在使用过时的 context API。
4. 检测副作用：严格模式会在渲染两次组件并比较结果后，触发额外的渲染以帮助你检测潜在的副作用问题。
5. 弃用 findDOMNode 的警告：React 17 已经不再支持在严格模式下使用 findDOMNode，会在开发环境中给出警告。

React 的严格模式从 React 16.3 版本开始引入，并且在后续版本中得到了改进和完善。具体来说：

• React 16.3: 引入了 <React.StrictMode>，用于启用严格模式。它帮助开发者在开发环境下发现潜在问题，并鼓励使用一些最佳实践。
• React 16.6: 引入了关于生命周期的警告，以帮助开发者在未来适应异步渲染模式。
• React 16.9: 继续增强了严格模式的功能，包括对不安全的生命周期用法的检测和警告。
• React 17: 严格模式继续存在，但没有太多的变化。React 17 引入了一些关于副作用的警告，以及在严格模式下弃用 findDOMNode 的警告。

更多关于严格模式的信息请参阅(zh-hans.legacy.reactjs.org/docs/strict…)