React的性能優化 - 代碼拆分之lazy的使用方法

我們在某些網站上肯定看到過這樣一種現象，頁面上圖片只有你滾動到那個位置附近的時候才會加載，否則就只占了個位，這就是延遲加載最普遍的應用場景。

我們react框架進行開發的時候也是一樣，沒有使用的組件是完全沒必要加載的。

說道代碼拆分就不得不說一個關鍵字:import 。 使用import動態導入模塊。返回一個promise。如果在代碼中動態導入一個模塊，

那么webpack就會做一次代碼拆分。把import導入的模塊以及以來打成一個獨立的js文件。默認情況下，頁面是不會主動加載他的，只有用到他的時候才去加載。

但對於react組件來說怎么才算是用到呢?顯然就是需要渲染他的時候。react提供了一個lazy函數用來將指定組件的導入行為封裝成react組件。

一旦封裝后的組件渲染也意味着要去加載被封裝的組件。注意這里封裝的是 組件的導入行為而不是組件本身。而且導入實際上意味着網絡請求。

lazy的使用方法：

一、新建一個About組件

import React, {Component} from 'react'; class About extends Component { render() { return ( <h1>hello world</h1>
 ); } } export default About;

 
二、建App組件,在react中導入lazy函數。然后用lazy封裝About。lazy需要傳入一個沒有參數的函數，函數內部直接用一個import指令來導入。

lazy返回就是一個react組件。然后渲染About組件。

mport React, {Component, lazy} from 'react'; const About = lazy(() => import("./About.jsx")); class App extends Component { constructor(props) { super(props); this.state = {}; } render() { return ( <div>
                    <About/>
            </div>
 ); } } export default App;

 

此時就這樣運行的話肯定會有報錯。那是因為用了lazy以后會有一個加載的空當。此時react不知道在這個空當需要顯示什么所以需要我們指定。

該怎么指定呢？用Suspense    什么是Suspense呢？ 他是一個react中的內置組件專門用來和lazy配合的。我們先來引入。

import React, {Component, lazy, Suspense} from 'react';

 

然后用Suspense把About組件包起來。然后設置一個Suspense的一個屬性：fallback。 fallback需要傳入一個loading。

這個loading可以是一個loading組件。這里我們為簡便期間直接寫一個loading單詞。

 return ( <div>
                <Suspense fallback={<div>loading...</div>}>
                    <About/>
                </Suspense>
            </div>
        );

 

這樣就可以顯示About組件的內容了。

這里是About能成功加載的情況下，那么如果About加載失敗該怎么辦呢？

react中有一個概念叫做ErrorBoundary錯誤邊界。實際上就是能夠捕獲后台組件渲染錯誤的組件。他實際上是利用了react一個生命周期方法加錯componentDidCatch。
那么怎么使用呢？看代碼:

import React, {Component, lazy, Suspense} from 'react'; const About = lazy(() => import("./About.jsx")); class App extends Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch() { this.setState({ hasError: true }) } render() { if (this.state.hasError) { return <div>error</div>
 } return ( <div>
                <Suspense fallback={<div>loading...</div>}>
                    <About/>
                </Suspense>
            </div>
 ); } } export default App;

 

 這就是lazy的大致用法了。。