一、React.lazyload
React.lazy是一個能夠讓你動態導入組件的函數。 這要求你的React代碼是基於ES6的，且支持動態import()。
React.lazy實質上是React官方使用Suspense配合lazy實現的惰性載入組件功能，這個優化可以使應用整體體積變小，載入速度更快，用戶可以更快地看到應用的內容。使用了React.lazy的技術後，可以讓應用的首屏載入速度更快一點，優化用戶體驗。而且，當你的組件屬於懶載入的時候，你也不需要再自己維護載入狀態和錯誤狀態（個別情況還是需要，這個後面會講）。
使用React.lazy和Suspense還有一個需要注意的地方，就是由於LazyComponents是非同步的，所以它們自有的Render函數的作用域是非同步的，所以如果你想在LazyComponents之間共享一些狀態，並在同步方式下渲染，你需要共享這些狀態的作用域一樣是非同步的。
二、React.lazyload載入成功怎麼知道
我們知道，React.lazy的作用是可以在需要的時候才會導入依賴的組件，雖然這種方式確實可以減輕打包後的文件大小，但是這樣在載入完成之前，頁面上就先出現了全白的頁面，不是太好的體驗。
React.lazy和React.Suspense是React V16.6中推出的新特性，當組件正在載入的時候，我們可以使用fallback的方式做出一些特殊的顯示，告訴用戶正在載入中，等後端返回數據之後，組件才會render出來。
“`
import React, { lazy, Suspense } from ‘react’;
const LazyComponent = lazy(() => import(‘./MyComponent’));
const App = () => (
<Suspense fallback={Loading…
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/258537.html
微信掃一掃 
支付寶掃一掃 