React組件在初始加載時(shí)渲染兩次：

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

如上在控制臺(tái)我們會(huì)看到輸出了兩次'被加載'

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

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

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

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

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

關(guān)于嚴(yán)格模式

StrictMode 是一個(gè)用來(lái)突出顯示應(yīng)用程序中潛在問(wèn)題的工具。與 Fragment 一樣，StrictMode 不會(huì)渲染任何可見(jiàn)的 UI。它為其后代元素觸發(fā)額外的檢查和警告。

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

你可以將整個(gè)應(yīng)用程序或者部分組件包裹在 <React.StrictMode> 標(biāo)簽中，來(lái)啟用嚴(yán)格模式。

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

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

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

React 的嚴(yán)格模式從 React 16.3 版本開(kāi)始引入，并且在后續(xù)版本中得到了改進(jìn)和完善。具體來(lái)說(shuō)：

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

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

最新評(píng)論