React組件在初始加載時渲染兩次：

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

如上在控制臺我們會看到輸出了兩次'被加載'

出現(xiàn)這種現(xiàn)象的原因是：

由于是使用腳手架創(chuàng)建項目，默認會開啟嚴格模式，在嚴格模式下，React 的開發(fā)環(huán)境會刻意執(zhí)行兩次渲染，用于突出顯示潛在問題。

如果不想出現(xiàn)這個問題，可以將入口文件中的嚴格模式去除：

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

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

關(guān)于嚴格模式

StrictMode 是一個用來突出顯示應用程序中潛在問題的工具。與 Fragment 一樣，StrictMode 不會渲染任何可見的 UI。它為其后代元素觸發(fā)額外的檢查和警告。

嚴格模式檢查僅在開發(fā)模式下運行；它們不會影響生產(chǎn)構(gòu)建。

你可以將整個應用程序或者部分組件包裹在 <React.StrictMode> 標簽中，來啟用嚴格模式。

import React from 'react';
const App = () => {
  return (
    <React.StrictMode>
      {/* 你的應用程序組件 */}
    </React.StrictMode>
  );
};
export default App;

嚴格模式會執(zhí)行以下檢查和優(yōu)化：

• 檢測過時的生命周期方法：React 在未來版本中可能會移除一些過時的生命周期方法。嚴格模式會在開發(fā)中給出警告，幫助你更早地發(fā)現(xiàn)和更新你的代碼。
• 檢測不安全的生命周期方法：在未來的 React 版本中，某些生命周期方法可能會在異步渲染模式下不再保證同步調(diào)用。嚴格模式下，如果你在 render 方法中使用了 setState，會收到一個警告。
• 檢測廢棄的 context API 使用：嚴格模式會檢查是否存在使用過時的 context API。
• 檢測副作用：嚴格模式會在渲染兩次組件并比較結(jié)果后，觸發(fā)額外的渲染以幫助你檢測潛在的副作用問題。
• 棄用 findDOMNode 的警告：React 17 已經(jīng)不再支持在嚴格模式下使用 findDOMNode，會在開發(fā)環(huán)境中給出警告。

React 的嚴格模式從 React 16.3 版本開始引入，并且在后續(xù)版本中得到了改進和完善。具體來說：

• React 16.3: 引入了 <React.StrictMode>，用于啟用嚴格模式。它幫助開發(fā)者在開發(fā)環(huán)境下發(fā)現(xiàn)潛在問題，并鼓勵使用一些最佳實踐。
• React 16.6: 引入了關(guān)于生命周期的警告，以幫助開發(fā)者在未來適應異步渲染模式。
• React 16.9: 繼續(xù)增強了嚴格模式的功能，包括對不安全的生命周期用法的檢測和警告。
• React 17: 嚴格模式繼續(xù)存在，但沒有太多的變化。React 17 引入了一些關(guān)于副作用的警告，以及在嚴格模式下棄用 findDOMNode 的警告。

到此這篇關(guān)于解決React初始化加載組件會渲染兩次的問題的文章就介紹到這了,更多相關(guān)React加載組件渲染兩次內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論