Suspense和lazy()都是react中比較新的特性,在項(xiàng)目中使用還比較少,但是學(xué)習(xí)一下有助于在后面的項(xiàng)目中使用,同樣可以一窺React未來(lái)的發(fā)展方向

React.lazy()

概括

顧名思義lazy()方法是用來(lái)對(duì)項(xiàng)目代碼進(jìn)行分割,懶加載用的.只有當(dāng)組件被加載,內(nèi)部的資源才會(huì)導(dǎo)入

為什么需要懶加載

在React的項(xiàng)目中import導(dǎo)入其他組件和庫(kù)都是默認(rèn)在初始直接導(dǎo)入的,webpack等打包工具會(huì)將import導(dǎo)入的文件直接合并到一個(gè)大文件中,如果項(xiàng)目很大,打包完后初始化加載時(shí)需要加載的文件會(huì)很大,這時(shí)候就需要代碼分割

官方文檔中的例子

項(xiàng)目中:

// app.js
import { add } from './math.js';
console.log(add(16, 26)); // 42
// math.js
export function add(a, b) {
? return a + b;
}

打包后

function add(a, b) {
? return a + b;
}
console.log(add(16, 26)); // 42

如何進(jìn)行代碼分割

在你的應(yīng)用中引入代碼分割的最佳方式是通過(guò)動(dòng)態(tài) import() 語(yǔ)法,這是官方文檔中說(shuō)的

動(dòng)態(tài)import例子:

靜態(tài)導(dǎo)入:

import { add } from './math';
console.log(add(16, 26));

動(dòng)態(tài)導(dǎo)入:

import("./math").then(math => {
? console.log(math.add(16, 26));
});

使用了動(dòng)態(tài)導(dǎo)入之后,webpack檢測(cè)到這種語(yǔ)法會(huì)自動(dòng)代碼分割,也就是壓縮到兩個(gè)文件里

React.lazy()就是對(duì)這個(gè)種動(dòng)態(tài)導(dǎo)入方式的優(yōu)化方法

使用:

const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
? return (
? ? // Displays <Spinner> until OtherComponent loads
? ? <React.Suspense fallback={<Spinner />}>
? ? ? <div>
? ? ? ? <OtherComponent />
? ? ? </div>
? ? </React.Suspense>
? );
}

發(fā)現(xiàn)沒(méi)有原來(lái)的動(dòng)態(tài)導(dǎo)入寫(xiě)法像 Promise的寫(xiě)法鏈?zhǔn)秸{(diào)用,現(xiàn)在動(dòng)態(tài)導(dǎo)入的方式,有點(diǎn)類似于Async寫(xiě)出來(lái)是同步使用的,可以直接講返回的Promise對(duì)象作為組件使用,當(dāng)這個(gè)組件pending是顯示的是Suspense中fallback的內(nèi)容,只有resolve才顯示加載好的組件.

所以可以看出Suspense和React.lazy()需要結(jié)合在一起用,否則會(huì)報(bào)錯(cuò)缺少Placeholder UI`

Suspense

Suspense的英文意思是懸念,懸停**,Suspense的作用就是在遇到異步請(qǐng)求或者異步導(dǎo)入組件的時(shí)候等待請(qǐng)求和導(dǎo)入完成再進(jìn)行渲染,**相比普通的組件, 我們是要求render是一個(gè)純函數(shù),一旦開(kāi)始渲染不會(huì)等待,而有了Suspense后我們可以再render過(guò)程中寫(xiě)一部代碼.

Suspense應(yīng)用場(chǎng)景

Subspense存在兩種應(yīng)用場(chǎng)景,第一種就是動(dòng)態(tài)導(dǎo)入組件(如上),一種就是異步請(qǐng)求數(shù)據(jù)(暫時(shí)不支持,大概16.9版本)

動(dòng)態(tài)導(dǎo)入組件

動(dòng)態(tài)導(dǎo)入組件上面的例子就是上面的代碼片段,就是當(dāng)這個(gè)組件pending是顯示的是Suspense中fallback的內(nèi)容,只有resolve才顯示加載好的組件,所以fallback不能為空

優(yōu)點(diǎn)

好處在于我們可以不用創(chuàng)建一些組件狀態(tài)的變量來(lái)控制是否顯示loading畫(huà)面和真正組件,這部分邏輯直接由Suspense內(nèi)部實(shí)現(xiàn). 而且還有一種場(chǎng)景就是當(dāng)一個(gè)父組件中,有多個(gè)動(dòng)態(tài)加載的組件,Suspense可以直接將loading狀態(tài)聚合,只有當(dāng)所有組件加載完成才顯示,這里免去了復(fù)雜的邏輯判斷.

數(shù)據(jù)請(qǐng)求后渲染頁(yè)面

Suspense暫時(shí)還不支持?jǐn)?shù)據(jù)請(qǐng)求后渲染, 預(yù)計(jì)是在16.9版本也就是2019年年中發(fā)布,但是以及有了實(shí)例使用的方法,下面這里就是官方的示例代碼,這里做一些翻譯解釋

// unstable_createResource這個(gè)就是一個(gè)封裝的請(qǐng)求數(shù)據(jù)的插件,不用太清楚類似于fetch
import {unstable_createResource} from 'react-cache';
// 聲明請(qǐng)求數(shù)據(jù)的方法
const TodoResource = unstable_createResource(fetchTodo);
//內(nèi)部請(qǐng)求TodoResource.read(props.id) 就是異步請(qǐng)求數(shù)據(jù)
function Todo(props) {
? // Suspends until the data is in the cache
? const todo = TodoResource.read(props.id);
? return <li>{todo.title}</li>;
}
function App() {
? return (
? ? // 只有當(dāng)兩個(gè)Todo內(nèi)部的異步請(qǐng)求都完成后才能渲染出來(lái),否則渲染<Spinner/>
? ? <React.Suspense fallback={<Spinner />}>
? ? ? <ul>
? ? ? ? {/* Siblings fetch in parallel */}
? ? ? ? <Todo id="1" />
? ? ? ? <Todo id="2" />
? ? ? </ul>
? ? </React.Suspense>
? );
}

這就是Suspense請(qǐng)求數(shù)據(jù)時(shí)的使用的方法,同樣解決了loading狀態(tài)的問(wèn)題,相當(dāng)于再render過(guò)程中加入了異步副作用操作,再普通的組件中異步操作是不起作用的,因?yàn)橄蠕秩就?異步數(shù)據(jù)才會(huì)返回,這時(shí)候已經(jīng)渲染完了.

Suspense實(shí)現(xiàn)原理

Subspense的實(shí)現(xiàn)主要就是利用了**ComponentDidCatch這個(gè)生命周期,這個(gè)什么周期就是用來(lái)捕獲子組件樹(shù)中的任何Javascript異常**

源碼就不分析了,這里說(shuō)一下大概的流程步驟:

• 父組件渲染到子組件時(shí)發(fā)現(xiàn)異步請(qǐng)求,直接拋出錯(cuò)誤,捕獲的結(jié)果是一個(gè)Promise對(duì)象
• ComponentDidCatch捕獲這個(gè)Promise對(duì)象,pending狀態(tài)下渲染fallback的
• 當(dāng)resolve時(shí)重新render,遇到下一個(gè)異步請(qǐng)求重復(fù)上面操作
• 直到整個(gè)父組件的拋出的promise對(duì)象都為resolve,將loading替換為真正的組件.

總結(jié)

Suspense其實(shí)就是將原來(lái)放在外面處理的異步請(qǐng)求也就是副作用放到渲染過(guò)程中進(jìn)行操作，這樣render這個(gè)函數(shù)就不再是純函數(shù)了，但是非常直觀方便，不需要再用很多狀態(tài)來(lái)控制loading顯示，而異步請(qǐng)求的結(jié)果無(wú)法預(yù)測(cè)會(huì)導(dǎo)致很多bug.

等到Suspense支持?jǐn)?shù)據(jù)請(qǐng)求的場(chǎng)景時(shí)，我會(huì)考慮把它運(yùn)用到自己的項(xiàng)目中， 感覺(jué)確實(shí)方便很多本來(lái)就覺(jué)得Loading狀態(tài)有點(diǎn)多余，雖然現(xiàn)在用的是Dva，會(huì)自動(dòng)給effect創(chuàng)建loading狀態(tài)的，還不是特別需要.

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論