解决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;

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

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

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

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

到此这篇关于解决React初始化加载组件会渲染两次的问题的文章就介绍到这了,更多相关React加载组件渲染两次内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论