亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

解決React初始化加載組件會(huì)渲染兩次的問(wèn)題

 更新時(shí)間:2023年08月11日 10:42:23   作者:CoderLiu  
這篇文章主要介紹了解決React初始化加載組件會(huì)渲染兩次的問(wèn)題,文中有出現(xiàn)這種現(xiàn)象的原因及解決方法,感興趣的同學(xué)跟著小編一起來(lái)看看吧

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-router-dom簡(jiǎn)介(推薦)

    react-router-dom簡(jiǎn)介(推薦)

    react-router包含三種類(lèi)型的組件:路由組件、路由匹配組件?、導(dǎo)航組件,在你使用這些組件的時(shí)候,都必須先從react-router-dom引入,這篇文章主要介紹了react-router-dom簡(jiǎn)介,需要的朋友可以參考下
    2022-12-12
  • react如何同步獲取useState的最新?tīng)顟B(tài)值

    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ù)器的方法

    將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-03
  • react中braft-editor的基本使用方式

    react中braft-editor的基本使用方式

    這篇文章主要介紹了react中braft-editor的基本使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • react中fetch之cors跨域請(qǐng)求的實(shí)現(xiàn)方法

    react中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-03
  • React+Antd修改Table組件滾動(dòng)條樣式的操作代碼

    React+Antd修改Table組件滾動(dòng)條樣式的操作代碼

    這篇文章主要介紹了React+Antd修改Table組件滾動(dòng)條樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-12-12
  • React Router中Link和NavLink的學(xué)習(xí)心得總結(jié)

    React Router中Link和NavLink的學(xué)習(xí)心得總結(jié)

    這篇文章主要介紹了React Router中Link和NavLink的學(xué)習(xí)心得總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • React 組件中的 bind(this)示例代碼

    React 組件中的 bind(this)示例代碼

    這篇文章主要介紹了 React 組件中的 bind(this) ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-09-09
  • React中FormData的使用實(shí)例詳解

    React中FormData的使用實(shí)例詳解

    FormData 是一個(gè)非常靈活的工具,適用于處理表單數(shù)據(jù),特別是在需要發(fā)送文件或復(fù)雜表單數(shù)據(jù)時(shí),本文給大家介紹React中FormData的使用示例詳解,感興趣的朋友一起看看吧
    2025-04-04
  • 解析React?ref?命令代替父子組件的數(shù)據(jù)傳遞問(wèn)題

    解析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

最新評(píng)論