react中Suspense的使用詳解

更新時(shí)間：2019年09月01日 09:50:02 作者：ddee

這篇文章主要介紹了react中Suspense的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

關(guān)于Suspense的使用，先來(lái)看下示例代碼

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
 return (
  <div>
   <Suspense fallback={<div>Loading...</div>}>
    <OtherComponent />
   </Suspense>
  </div>
 );
}

OtherComponent是通過(guò)懶加載加載進(jìn)來(lái)的，所以渲染頁(yè)面的時(shí)候可能會(huì)有延遲，但使用了Suspense之后，可優(yōu)化交互。

在<OtherComponent />外面使用Suspense標(biāo)簽，并在fallback中聲明OtherComponent加載完成前做的事，即可優(yōu)化整個(gè)頁(yè)面的交互

fallback 屬性接受任何在組件加載過(guò)程中你想展示的 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>
 );
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React為 Vue 引入容器組件和展示組件的教程詳解
這篇文章主要介紹了React為 Vue 引入容器組件和展示組件的教程詳解，文中很詳細(xì)的給大家介紹了使用容器組件的原因,需要的朋友可以參考下
2018-05-05
React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量
本文主要介紹了React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量，本文將介紹兩種常用的方法，使用 dotenv 庫(kù)和通過(guò)命令行參數(shù)傳遞環(huán)境變量，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
react ant protable自定義實(shí)現(xiàn)搜索下拉框
這篇文章主要介紹了react ant protable自定義實(shí)現(xiàn)搜索下拉框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
React Hook用法示例詳解（6個(gè)常見(jiàn)hook）
這篇文章主要介紹了React Hook用法詳解（6個(gè)常見(jiàn)hook）,本文通過(guò)實(shí)例代碼給大家介紹了6個(gè)常見(jiàn)hook，需要的朋友可以參考下
2021-04-04
react+typescript中使用echarts的實(shí)現(xiàn)步驟
本文主要介紹了react+typescript中使用echarts的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
React處理復(fù)雜圖片樣式的方法詳解
這篇文章主要為大家詳細(xì)介紹了React處理復(fù)雜圖片樣式的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置
這篇文章主要介紹了詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
react中useState使用:如何實(shí)現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)
這篇文章主要介紹了react中useState的使用:如何實(shí)現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
react實(shí)現(xiàn)阻止父容器滾動(dòng)
這篇文章主要介紹了react實(shí)現(xiàn)阻止父容器滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
concent漸進(jìn)式重構(gòu)react應(yīng)用使用詳解
這篇文章主要為大家介紹了concent漸進(jìn)式重構(gòu)react應(yīng)用的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11