13 react 元件懶載入

2022-08-15 08:39:14 字數 699 閱讀 2634

1. react.lazy()  接受乙個函式作為引數,這個函式動態呼叫 import , 該函式的返回值必須是乙個 promise,該 promise 必須 resolve 乙個 【default export】的元件。

2. lazy 載入的元件必須在 suspense 中使用。否則會報錯。

3. suspense 元件接受乙個 fallback 屬性。fallback屬性接受任何在元件載入過程中你想展示的 react 元素,比如loading。該屬性必須傳遞,否則會報錯。如果不想載入

內容可以傳遞 null

4. suspense 元件中可以包裹多個懶載入元件。

//

mycomponent.js中

class mycomponent extends react.component {}

export

default

mycomponent

中import react, from 'react';

const mycomponent = react.lazy(() => import('./mycomponent'))

reactdom.render(

loading...

}>

,document.getelementbyid('root')

)

未完待續

路由懶載入與元件懶載入

一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 1 不用懶載入,vue中路由 如下 impor...

路由懶載入和元件懶載入

為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 1 未用懶載入,vue中路由 如下 import vue from vue i...

vue路由懶載入及元件懶載入

一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 1 未用懶載入,vue中路由 如下 import ...