React组件懒加载

React组件懒加载

Web应用一个重要的优点就在于能够只加载咱们想要的功能，而没必要每次打开都把整个系统载入

那么，在React里咱们怎样实现当用到咱们需求的功能时再请求对应的组件，而不是一次性的请求所有代码呢？

bundle-loader

新版的React建议咱们使用bundle-loader进行代码的分离,下面咱们看下它的用法:

// 当你用到这个函数时，这个chunk才会被请求
var waitForChunk = require("bundle-loader!./file.js");

//  当请求的chunk加载完成才会执行传入的回调函数，并将请求的模块做为参数传入回调函数
waitForChunk(function(file) {
    // 接收到懒加载模块，相似于下面代码
    // var file = require("./file.js");
});

这个插件使用很是简单，只是对require.ensure的封装，使用起来相似于AMD的方式，
只需在回调函数里接收到懒加载的模块便可。

结合React

React 组件也是模块，所以可使用bundle-loader进行代码分离,只是须要在合适的地方请求调用便可。

怎样知道什么时候须要请求这个组件呢？社区建议的是先加载一个bundle容器组件（这个bundle容器组件自己很是小），当这个容器组件被渲染到dom时则可认为咱们须要请求对应的懒加载组件了。

咱们能够为全部的懒加载组件封装一个通用的容器组件:
(这里也有已经封装好的:react-lazy-bundle,直接安装便可）

import React, { Component } from "react";

class Bundle extends Component {
  state = {
    // 由于module被占用了，咱们用mod定义变量
    mod: null
  };

  componentWillMount() {
    this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({
      mod: null
    });
    props.load(mod => {
      this.setState({
        // 为了兼容es module 和 AMD module
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render() {
    //若加载完成则渲染对应懒加载的组件，反之加载beforeLoad传入的组件
    return this.state.mod
      ? <this.state.mod {...this.props} />
      : <this.props.beforeLoad {...this.props} />;
  }
}

export default Bundle;

如上封装，使用时咱们只需以下便可:

import React, { Component } from "react";
import Bundle from "./Bundle";

import Test from "bundle-loader?lazy&name=[name]!./test";

const BeforeLoadComponent = props =>
  <div>
    before load {props.name}
  </div>;

class HomePage extends Component {
  render() {
    return (
      <div>
        <Bundle name="flypie" load={Test} beforeLoad={BeforeLoadComponent} />
      </div>
    );
  }
}

export default HomePage;

怎么样，是否是特别简单

结合React Router

结合React Router也很是简单,由于已经把Bundle做为Route的component参数了，
因此要再封装一层，把load和beforeLoad预先传入便可。

import Bundle from "./Bundle";
import About from "bundle-loader?lazy&name=[name]!./About";

const AboutWrapper = props => <Bundle load={About} {...props}/>;

class App extends Component {

  render() {
    return (
      <div>
        <h1>Welcome!</h1>
        <Route path="/about" component={AboutWrapper}/>
      </div>
    )
  }
}