react之元件非同步載入

2021-09-22 02:47:45 字數 900 閱讀 1755

我們在用react的時候,希望元件非同步載入,提高效能,那麼應該怎麼實現呢?

往下看。。。

react非同步載入的方法很多,這裡只說一種,因為這一種直接使用react的特性就可以了,不需要另外配置webpack,就是用乙個小技巧去import元件,所以方便,實現簡單。

寫乙個元件a,這個元件內部會載入另外的元件b,用b的內容完全覆蓋到a上面,

路由需要開啟a的時候,內容載入的b才會調起,達到非同步效果,而b就是我們真正想開啟的元件,

文章最後給返回元件a的**。

asynccomponent是乙個函式,呼叫它會返回元件a,a內部載入我們想要的元件b,asynccomponent算是乙個工廠函式,可以返回元件a,構造元件a需要傳進去乙個函式,這個函式直接返回我們想要的元件b。

asynccomponent會用拿到的元件b來渲染元件a,所以雖然開啟的是元件a,但元件a本身是空的,把元件b完全融合進去之後,其實a就變成跟b一樣了,

這算是一種mixin技術。

下面給出asynccomponent元件的**:

// 支援按需載入的包裝元件

export function asynccomponent (importcomponent) ;

}componentdidmount () );

});}

render ()

} return asynccomponent;

}

那麼我們該如何使用呢?請繼續往下面看,我們需要通過函式來非同步引用這個元件,通過asynccomponent來返回元件

eg:

//eg:

const routes =

export

好了,看到這裡的話,我們就可以愉快的進行非同步載入react的元件了

開發隨筆 React非同步載入元件封裝

react非同步載入元件封裝 作者正在開源乙個基於react typescript node.js的部落格系統,原始碼在練手開源專案,有想一起學習的或者有空的大佬可以幫我看看 提提意見,順便給個star最好不過拉。謝謝大家 1.場景敘述 今天,碰到這樣乙個問題,就是當表單過載修改的時候,需要根據介面...

react非同步載入元件,分模組載入,提高開啟效能

react非同步載入的方法很多,這裡只說一種,因為這一種直接使用react的特性就可以了,不需要另外配置webpack,就是用乙個小技巧去import元件,所以方便,實現簡單。寫乙個元件a,這個元件內部會載入另外的元件b,用b的內容完全覆蓋到a上面,路由需要開啟a的時候,內容載入的b才會調起,達到非...

vue 路由懶載入,元件非同步載入

用於緩解首屏載入緩慢 1.vue非同步元件 vue router配置路由 使用vue的非同步元件實現按需載入 2.webpack 的 require.ensure vue router配置路由,使用webpack的require.ensure,也可實現 require.ensure 接受三個引數 語...