react中Suspense的使用詳解
更新時(shí)間：2019年09月01日 09:50:02 作者：ddee
這篇文章主要介紹了react中Suspense的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
關(guān)于Suspense的使用，先來看下示例代碼
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
OtherComponent是通過懶加載加載進(jìn)來的，所以渲染頁面的時(shí)候可能會(huì)有延遲，但使用了Suspense之后，可優(yōu)化交互。
在<OtherComponent />外面使用Suspense標(biāo)簽，并在fallback中聲明OtherComponent加載完成前做的事，即可優(yōu)化整個(gè)頁面的交互
fallback 屬性接受任何在組件加載過程中你想展示的 React 元素。你可以將 Suspense 組件置于懶加載組件之上的任何位置。你甚至可以用一個(gè) Suspense 組件包裹多個(gè)懶加載組件。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解超簡單的react服務(wù)器渲染(ssr)入坑指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實(shí)例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫配置開發(fā)h5表單頁面,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了react中定義變量并使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了React文件分段上傳實(shí)現(xiàn)方法，將文件切成多個(gè)小的文件；將切片并行上傳；所有切片上傳完成后，服務(wù)器端進(jìn)行切片合成；當(dāng)分片上傳失敗，可以在重新上傳時(shí)進(jìn)行判斷，只上傳上次失敗的部分實(shí)現(xiàn)斷點(diǎn)續(xù)傳；當(dāng)切片合成為完整的文件，通知客戶端上傳成功2022-11-11
react-native 封裝視頻播放器react-native-video的使用
本文主要介紹了react-native 封裝視頻播放器react-native-video的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
最近看了vueuse的useVirtualList的實(shí)現(xiàn)方式,發(fā)現(xiàn)虛擬滾動(dòng)效果不錯(cuò),就嘗試著同樣的寫法改成react版本,虛擬列表主要包含三部分組成,offset,viewcapacity,overscan,本文就給大家介紹一下React虛擬列表的實(shí)現(xiàn),需要的朋友可以參考下2023-08-08
前端開發(fā)使用Ant Design項(xiàng)目評價(jià)
這篇文章主要為大家介紹了前端開發(fā)使用Ant Design項(xiàng)目評價(jià)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
rematch是對redux的二次封裝，簡化了redux是使用，極大的提高了開發(fā)體驗(yàn)，這篇文章主要介紹了React狀態(tài)管理器Rematch的使用,需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于react中組件通信的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
詳解如何封裝和使用一個(gè)React鑒權(quán)組件
JavaScript?和?React?提供了靈活的事件處理機(jī)制,特別是通過利用事件的捕獲階段來阻止事件傳播可以實(shí)現(xiàn)精細(xì)的權(quán)限控制,本文將詳細(xì)介紹這一技術(shù)的應(yīng)用,并通過實(shí)踐案例展示如何封裝和使用一個(gè)?React?鑒權(quán)組件,需要的可以參考下2024-03-03