解決React初始化加載組件會(huì)渲染兩次的問(wèn)題
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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react如何同步獲取useState的最新?tīng)顟B(tài)值
這篇文章主要介紹了react如何同步獲取useState的最新?tīng)顟B(tài)值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01將React+Next.js的項(xiàng)目部署到服務(wù)器的方法
本文詳細(xì)介紹了將React+Next.js項(xiàng)目部署到服務(wù)器的步驟,包括服務(wù)器環(huán)境準(zhǔn)備、項(xiàng)目配置與構(gòu)建、啟動(dòng)服務(wù)、配置Nginx反向代理、HTTPS配置、驗(yàn)證與監(jiān)控以及高級(jí)優(yōu)化,感興趣的朋友一起看看吧2025-03-03react中fetch之cors跨域請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了react中fetch之cors跨域請(qǐng)求的實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03React+Antd修改Table組件滾動(dòng)條樣式的操作代碼
這篇文章主要介紹了React+Antd修改Table組件滾動(dòng)條樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12React Router中Link和NavLink的學(xué)習(xí)心得總結(jié)
這篇文章主要介紹了React Router中Link和NavLink的學(xué)習(xí)心得總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12解析React?ref?命令代替父子組件的數(shù)據(jù)傳遞問(wèn)題
這篇文章主要介紹了React?-?ref?命令為什么代替父子組件的數(shù)據(jù)傳遞,使用?ref?之后,我們不需要再進(jìn)行頻繁的父子傳遞了,子組件也可以有自己的私有狀態(tài)并且不會(huì)影響信息的正常需求,這是為什么呢?因?yàn)槲覀兪褂昧?ref?命令的話(huà),ref是可以進(jìn)行狀態(tài)的傳輸2022-08-08