前言

本文講述怎么實(shí)現(xiàn)動(dòng)態(tài)加載組件，并借此闡述適配器模式。

一、普通路由例子

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={() => <h1 style={{ textAlign: 'center', marginTop: '160px', color:'rgba(255, 255, 255, 0.7)' }}>頁(yè)面不見(jiàn)了</h1>} />
   </Switch>
  </Router>
 );
}

以上是最常見(jiàn)的React router。在簡(jiǎn)單的單頁(yè)應(yīng)用中，這樣寫(xiě)是ok的。因?yàn)榇虬蟮膯我籮s文件bundle.js也不過(guò)200k左右，gzip之后，對(duì)加載性能并沒(méi)有太大的影響。

 但是，當(dāng)產(chǎn)品經(jīng)歷多次迭代后，追加的頁(yè)面導(dǎo)致bundle.js的體積不斷變大。這時(shí)候，優(yōu)化就變得很有必要。

二、如何優(yōu)化

優(yōu)化使用到的一個(gè)重要理念就是——按需加載。

可以結(jié)合例子進(jìn)行理解為：只加載當(dāng)前頁(yè)面需要用到的組件。

比如當(dāng)前訪問(wèn)的是/center頁(yè)，那么只需要加載Center組件即可。不需要加載Data組件。

業(yè)界目前實(shí)現(xiàn)的方案有以下幾種：

•react-router的動(dòng)態(tài)路由getComponent方法(router4已不支持)
•使用react-loadable小工具庫(kù)
•自定義高階組件進(jìn)行按需加載

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

接下來(lái)，將介紹如何用自定義高階組件實(shí)現(xiàn)按需加載。

三、自定義高階組件

3.1 webpack的import方法

webpack將import()看做一個(gè)分割點(diǎn)并將其請(qǐng)求的module打包為一個(gè)獨(dú)立的chunk。import()以模塊名稱(chēng)作為參數(shù)名并且返回一個(gè)Promise對(duì)象。

因?yàn)閕mport()返回的是Promise對(duì)象，所以不能直接給<Router/>使用。

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

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

當(dāng)前場(chǎng)景，需要解決的是，使用import()異步加載組件后，如何將加載的組件交給React進(jìn)行更新。
 方法也很容易，就是利用state。當(dāng)異步加載好組件后，調(diào)用setState方法，就可以通知到。
 那么，依照這個(gè)思路，新建個(gè)高階組件，運(yùn)用適配器模式，來(lái)對(duì)import()進(jìn)行封裝。

3.3 實(shí)現(xiàn)異步加載方法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'));

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

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

3.4 釋疑

•state.Component初始化

this.state = {
 Component: null,
};

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

•module.default ? module.default : module

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

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

這里的null，其實(shí)可以用<LoadingComponent />代替。作用是：當(dāng)異步組件還沒(méi)加載好時(shí)，起到占位的作用。
this.props是通過(guò)AsyncComponent組件透?jìng)鹘o異步組件的。

3.5 修改webpack構(gòu)建

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

在輸出項(xiàng)中，增加chunkFilename即可。

四、小結(jié)

自定義高階組件的好處，是可以按最少的改動(dòng)，來(lái)優(yōu)化已有的舊項(xiàng)目。

像上面的例子，只需要改變import組件的方式即可?；ㄗ钌俚拇鷥r(jià)，就可以得到頁(yè)面性能的提升。

 其實(shí)，react-loadable也是按這種思路去實(shí)現(xiàn)的，只不過(guò)增加了很多附屬的功能點(diǎn)而已。

以上所述是小編給大家介紹的React router動(dòng)態(tài)加載組件之適配器模式的應(yīng)用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論