您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“React18中的SuspenseList有什么作用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“React18中的SuspenseList有什么作用”吧!
這個特性在React歷史版本中的出現(xiàn),第一次是16.6版本,發(fā)布了支持代碼拆分的Suspense
組件。在16.9版本中繼而支持了數(shù)據(jù)提取。感興趣的同學(xué)可以移步React
的changelog
。
前文有介紹,我們僅用一個例子來溫顧下概念和使用
// 這個組件是動態(tài)加載的 const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <React.Suspense fallback={<Spinner />}> <div> <OtherComponent /> </div> </React.Suspense> ); }
在OtherComponent
組件尚不具備渲染條件的時候,會用fallback
傳入的組件進(jìn)行預(yù)制渲染。這邊不具備渲染條件的具體表現(xiàn)就是數(shù)據(jù)獲取時間較長,組件結(jié)構(gòu)復(fù)雜等,但是不想因為這些影響應(yīng)用的首屏渲染或者初始化,之前的Suspense
的文章有介紹,不再贅述。
從字面上的意思就能夠簡單的理解,就是如果我們的代碼中有多個Suspense
存在,我們應(yīng)該怎么控制它們的展示順序和展示方式呢?由此React
官方給我們提供了SuspenseList
組件。
<SuspenseList revealOrder="forwards"> <Suspense fallback={'加載中...'}> <ProfilePicture id={1} /> </Suspense> <Suspense fallback={'加載中...'}> <ProfilePicture id={2} /> </Suspense> <Suspense fallback={'加載中...'}> <ProfilePicture id={3} /> </Suspense> ... </SuspenseList>
我們首先介紹下SuspenseList
僅有的兩個Props
revealOrder
表示的是子Suspense
的加載順序,可選值有forwards
,backwards
,together
forwards
表示同一層次,從前往后展示,無論請求速度都是前面的先展示
backwards
跟forwards相反
together
表示所有suspense都準(zhǔn)備好后同時顯示,而不是一個個顯示
tail
指定如何顯示SuspenseList
中未加載項目的行為
默認(rèn)情況下,SuspenseList
將顯示列表中的所有 fallback
collapsed
僅顯示列表中下一個 fallback
hidden
未加載的項目不顯示任何信息
ps:SuspenseList
只對直接子層級的Suspense
或者SuspenseList
起作用,不會對孫子節(jié)點起作用。
SuspenseList
讓我們可以對一組Suspense
的行為進(jìn)行復(fù)合編排,雖然在演示中的demo相對比較簡單,但是如果在一個比較大型的項目中,我們經(jīng)常會使用Layout
進(jìn)行布局。就拿我們常見的中后端管理平臺來說和C端主體頁面來舉例。
中后端系統(tǒng)中,我們經(jīng)常使用頂欄+側(cè)邊欄+主體頁面的方式來布局,在這一層面目前業(yè)界,踐行微前端的套路居多,比如qiankun.js
,包括筆者所在的團(tuán)隊,也探索了一套自己的微前端實現(xiàn)體系。如果在C端頁面,采用微前端的方式可能未必合適,在頁面中存在多區(qū)塊渲染等需求上,利用SuspenseList
和Suspense
結(jié)合React后端渲染SSR的能力,就能夠較系統(tǒng)的實現(xiàn)獨立區(qū)塊的加載順序和行為的效果。
到此,相信大家對“React18中的SuspenseList有什么作用”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。