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

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

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?接受一個(gè)函數(shù)，這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用?import()。它必須返回一個(gè)?Promise，該 Promise 需要 resolve 一個(gè)?default?export 的 React 組件。

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

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

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

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)絡(luò)問題），它會(huì)觸發(fā)一個(gè)錯(cuò)誤。

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

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()的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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