React.lazy?能實現(xiàn)像渲染常規(guī)組件一樣處理動態(tài)引入的組件。

允許你定義一個動態(tài)加載的組件。這有助于縮減 bundle 的體積，并延遲加載在初次渲染時未用到的組件。

import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {return (<div><Suspense fallback={<div>Loading...</div>}><OtherComponent /></Suspense></div>); }

React.lazy?接受一個函數(shù)，這個函數(shù)需要動態(tài)調(diào)用?import()。它必須返回一個?Promise，該 Promise 需要 resolve 一個?default?export 的 React 組件。

請注意，渲染?lazy?組件依賴該組件渲染樹上層的?<React.Suspense>?組件。這是指定加載指示器（loading indicator）的方式，以防其組件樹中的某些子組件尚未具備渲染條件。

應在?Suspense?組件中渲染 lazy 組件，如此使得我們可以使用在等待加載 lazy 組件時做優(yōu)雅降級（如 loading 指示器等）。

fallback?屬性接受任何在組件加載過程中你想展示的 React 元素。你可以將?Suspense?組件置于懶加載組件之上的任何位置。你甚至可以用一個?Suspense?組件包裹多個懶加載組件。

import React, { Suspense } from 'react';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>); }

異常捕獲邊界（Error boundaries）

如果模塊加載失敗（如網(wǎng)絡問題），它會觸發(fā)一個錯誤。

可以通過異常捕獲邊界（Error boundaries）技術來處理這些情況，以顯示良好的用戶體驗并管理恢復事宜。

import React, { Suspense } from 'react'; import MyErrorBoundary from './MyErrorBoundary';const OtherComponent = React.lazy(() => import('./OtherComponent')); const AnotherComponent = React.lazy(() => import('./AnotherComponent'));const MyComponent = () => (<div><MyErrorBoundary><Suspense fallback={<div>Loading...</div>}><section><OtherComponent /><AnotherComponent /></section></Suspense></MyErrorBoundary></div> );

總結(jié)

以上是生活随笔為你收集整理的React.lazy()的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。