加載東西很困難

你們中有多少人寫(xiě)的是每天加載10次？通常，我們希望即使在連接速度較慢的情況下也能使我們的應(yīng)用程序響應(yīng)，因此我們有加載指示器向用戶(hù)提供應(yīng)用程序正在運(yùn)行的反饋。如果您考慮您的應(yīng)用程序，那么很多時(shí)間和精力都集中在協(xié)調(diào)何時(shí)出現(xiàn)，何時(shí)出現(xiàn)以及向用戶(hù)展示什么方面。這是瀏覽器使用的任何資源，甚至是我們未明確獲取的資源（例如圖像，字體，代碼等）也會(huì)影響我們進(jìn)行交互和UX的時(shí)間。在本文中，我們將介紹幾種在我們的應(yīng)用程序中加載資源的方法，以及在不久的將來(lái)它將如何發(fā)揮作用。

代碼拆分

代碼拆分是指只發(fā)送加載正在訪(fǎng)問(wèn)的頁(yè)面所需的代碼，然后在用戶(hù)導(dǎo)航時(shí)將其余代碼發(fā)送到客戶(hù)端。盡管有很多其他的方法可以實(shí)現(xiàn)這一點(diǎn)，但是React有幾個(gè)api可以幫助我們將bundle分割成代碼塊，這些代碼塊以最有效的方式進(jìn)行分組，以減小它們的文件大小。為了分割我們的應(yīng)用程序，我們需要的第一個(gè)API叫做lazy，它非常簡(jiǎn)單，它需要一個(gè)返回動(dòng)態(tài)導(dǎo)入的函數(shù)，然后它就可以替換組件了。

另一個(gè)API稱(chēng)為suspence。懸置幫助我們確定我們?cè)噲D調(diào)用的資源是否可用，并在資源可用時(shí)顯示另一種加載狀態(tài)。換句話(huà)說(shuō)，suspence是一個(gè)聲明性的加載狀態(tài)API。

數(shù)據(jù)獲取

請(qǐng)看以下基于類(lèi)的傳統(tǒng)數(shù)據(jù)獲取組件的示例：

它初始化構(gòu)造函數(shù)上的狀態(tài)，獲取掛載時(shí)的數(shù)據(jù)，并在呈現(xiàn)時(shí)計(jì)算是否有數(shù)據(jù)要呈現(xiàn)，或者是否可以顯示加載程序回退。你一定在想，當(dāng)然用hook會(huì)更好吧？

使用hook，您可以使用effects獲取數(shù)據(jù)，并強(qiáng)制檢查加載狀態(tài)以顯示加載程序，直到資源可用為止。我們減少了一些樣板代碼，使其更干凈，但它仍然是相同的過(guò)程，它仍然必須決定是否呈現(xiàn)加載程序或內(nèi)容。

到目前為止，我們只能使用suspence加載帶有l(wèi)azy的動(dòng)態(tài)代碼，但實(shí)際上，我們也可以將它用于其他類(lèi)型的資源。您可以?huà)炱鸾M件層次結(jié)構(gòu)中的任何元素，如果調(diào)用資源無(wú)法掛起該子樹(shù)的呈現(xiàn)并提供回退，它將查找該樹(shù)，直到找到一個(gè)可以或可以出錯(cuò)的元素，它的工作方式與錯(cuò)誤邊界完全相同。

suspence允許異步資源的行為就像它們具有同步訪(fǎng)問(wèn)權(quán)限一樣。我們甚至沒(méi)有在我們的抓取組件上的加載程序，我們只是讓React知道資源還沒(méi)有準(zhǔn)備好，Suspence將在樹(shù)的某個(gè)地方提供一個(gè)回退，等待我們的資源準(zhǔn)備好呈現(xiàn)。

suspence不僅通過(guò)成倍地減少代碼行來(lái)改善DX，而且還允許在加載狀態(tài)之間進(jìn)行更平滑的轉(zhuǎn)換，比如當(dāng)你的應(yīng)用程序從延遲加載代碼到獲取數(shù)據(jù)時(shí)。

其他資源

另一個(gè)很好的例子是圖像，有時(shí)我們的頁(yè)面呈現(xiàn)，一些圖像丟失，對(duì)這些資源的請(qǐng)求可能更重。讓我們做我們的新把戲，用懸置加載一個(gè)圖像。

當(dāng)然，你不必自己去做，這個(gè)平臺(tái)是一個(gè)漂亮的庫(kù)，它為你的圖片和其他懸置資源包裝了組件。

作為后備方案，您可以使用分辨率較低的常規(guī)</>< style>標(biāo)記而不是微調(diào)器，這樣可以在縮略圖和全尺寸圖像之間實(shí)現(xiàn)平滑過(guò)渡。

嚴(yán)格模式

因此，現(xiàn)在我們有一些資源加載，我們的應(yīng)用程序可能會(huì)開(kāi)始感到緩慢如果我們繼續(xù)加載程序，我們需要決定我們?cè)敢鉃槊總€(gè)資源等待多少。我肯定需要先檢索代碼和數(shù)據(jù)，但我可以在幾秒鐘內(nèi)顯示低分辨率的縮略圖，以提供一個(gè)幾乎完整的UI。懸置為我們提供了第二個(gè)名為maxDuration的道具，這個(gè)道具允許我們以milis為單位指定它應(yīng)該等待多少時(shí)間，直到它提供一個(gè)回退或內(nèi)容。maxDuration只有在滿(mǎn)足某些條件時(shí)才會(huì)起作用，這就是事情變得有點(diǎn)棘手的地方。

為了讓React正確地評(píng)估正在發(fā)生的事情，掛起的樹(shù)中不應(yīng)該有不推薦使用的api。為了幫助我們識(shí)別可能的問(wèn)題，React公開(kāi)了一個(gè)名為StrictMode的標(biāo)記。嚴(yán)格模式是一個(gè)穩(wěn)定的API，您現(xiàn)在可以在生產(chǎn)中使用它，任何東西都不會(huì)中斷，但是，如果在它的子級(jí)中使用任何不推薦的API，您將在瀏覽器的控制臺(tái)上得到錯(cuò)誤。

并行渲染

如果你在嚴(yán)格模式下包裝你的應(yīng)用程序，你的控制臺(tái)仍然是清晰的，恭喜你！現(xiàn)在您可以激活并發(fā)模式并開(kāi)始利用maxDuration。但并發(fā)模式到底是什么呢？

有兩種方法可以在應(yīng)用程序中啟用并發(fā)模式，同樣，這些功能是實(shí)驗(yàn)性的，預(yù)計(jì)將在2019年第2季度左右發(fā)布。React dom公開(kāi)一個(gè)名為createRoot的函數(shù)（當(dāng)前不穩(wěn)定的u createRoot），它接收到對(duì)要呈現(xiàn)應(yīng)用程序的元素的dom引用，您可以將render方法與應(yīng)用程序?qū)嵗溄悠饋?lái)。

作為一個(gè)opt-in特性，React公開(kāi)了一個(gè)名為ConcurrentMode的標(biāo)記，您可以使用它來(lái)包裝應(yīng)用程序的子部分，以便只在它們的子樹(shù)中啟用并發(fā)呈現(xiàn)。