React router動態加載組件之適配器模式的應用詳解

前言

本文講述怎么實現動態加載組件，并借此闡述適配器模式。

一、普通路由例子

import Center from 'page/center';
import Data from 'page/data';

function App(){
 return (
  <Router>
   <Switch>
   <Route exact path="/" render={() => (<Redirect to="/center" />)} />
   <Route path="/data" component={Data} />
   <Route path="/center" component={Center} />
   <Route render={() => <h2 style={{ textAlign: 'center', marginTop: '160px', color:'rgba(255, 255, 255, 0.7)' }}>頁面不見了</h2>} />
   </Switch>
  </Router>
 );
}

以上是最常見的React router。在簡單的單頁應用中，這樣寫是ok的。因為打包后的單一js文件bundle.js也不過200k左右，gzip之后，對加載性能并沒有太大的影響。

 但是，當產品經歷多次迭代后，追加的頁面導致bundle.js的體積不斷變大。這時候，優化就變得很有必要。

二、如何優化

優化使用到的一個重要理念就是——按需加載。

可以結合例子進行理解為：只加載當前頁面需要用到的組件。

比如當前訪問的是/center頁，那么只需要加載Center組件即可。不需要加載Data組件。

業界目前實現的方案有以下幾種：

•react-router的動態路由getComponent方法(router4已不支持)
•使用react-loadable小工具庫
•自定義高階組件進行按需加載

而這些方案共通的點，就是利用webpack的code splitting功能（webpack1使用require.ensure，webpack2/webpack3使用import），將代碼進行分割。

接下來，將介紹如何用自定義高階組件實現按需加載。

三、自定義高階組件

3.1 webpack的import方法

webpack將import()看做一個分割點并將其請求的module打包為一個獨立的chunk。import()以模塊名稱作為參數名并且返回一個Promise對象。

因為import()返回的是Promise對象，所以不能直接給<Router/>使用。

3.2 采用適配器模式封裝import()

適配器模式（Adapter）:將一個類的接口轉換成客戶希望的另外一個接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。

當前場景，需要解決的是，使用import()異步加載組件后，如何將加載的組件交給React進行更新。
 方法也很容易，就是利用state。當異步加載好組件后，調用setState方法，就可以通知到。
 那么，依照這個思路，新建個高階組件，運用適配器模式，來對import()進行封裝。

3.3 實現異步加載方法asyncComponent

import React from 'react';
export const asyncComponent = loadComponent => (
 class AsyncComponent extends React.Component {
  constructor(...args){
   super(...args);
   this.state = {
    Component: null,
   };
   this.hasLoadedComponent = this.hasLoadedComponent.bind(this);
  }
  componentWillMount() {
   if(this.hasLoadedComponent()){
    return;
   }
   loadComponent()
    .then(module => module.default ? module.default : module)
    .then(Component => {
     this.setState({
      Component
     });
    })
    .catch(error => {
     /*eslint-disable*/
     console.error('cannot load Component in <AsyncComponent>');
     /*eslint-enable*/
     throw error;
    })
  }
  hasLoadedComponent() {
   return this.state.Component !== null;
  }
  render(){
   const {
    Component
   } = this.state;
   return (Component) ? <Component {...this.props} /> : null;
  }
 }
);
// 使用方式
const Center = asyncComponent(()=>import(/* webpackChunkName: 'pageCenter' */'page/center'));

如例子所示，新建一個asyncComponent方法，用于接收import()返回的Promise對象。

當componentWillMount時（服務端渲染也有該生命周期方法），執行import()，并將異步加載的組件，set入state，觸發組件重新渲染。

3.4 釋疑

•state.Component初始化

this.state = {
 Component: null,
};

這里的null，主要用于判斷異步組件是否已經加載。

•module.default ? module.default : module

這里是為了兼容具名和default兩種export寫法。

•return (Component) ? <Component {...this.props} /> : null;

這里的null，其實可以用<LoadingComponent />代替。作用是：當異步組件還沒加載好時，起到占位的作用。
this.props是通過AsyncComponent組件透傳給異步組件的。

3.5 修改webpack構建

output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].[chunkhash].js'),
 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

在輸出項中，增加chunkFilename即可。

四、小結

自定義高階組件的好處，是可以按最少的改動，來優化已有的舊項目。

像上面的例子，只需要改變import組件的方式即可。花最少的代價，就可以得到頁面性能的提升。

 其實，react-loadable也是按這種思路去實現的，只不過增加了很多附屬的功能點而已。

以上所述是小編給大家介紹的React router動態加載組件之適配器模式的應用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！