react之组件异步加载

我们在用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) {
  class AsyncComponent extends React.Component {
    constructor (props) {
      super(props);

      this.state = {
        component: null
      };
    }

    componentDidMount () {
      importComponent()
        .then(cmp => {
          this.setState({ component: cmp.default });
        });
    }

    render () {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

那么我们该如何使用呢？请继续往下面看，我们需要通过函数来异步引用这个组件，通过asyncComponent来返回组件

eg：

//eg:
const routes = [{
    title: 'demo',
    path: '/',
    component: asyncComponent(() => import('./pages/Demo')),
    children:[]
  }]
export { routes }

好了，看到这里的话，我们就可以愉快的进行异步加载react的组件了

原创不易，自由转载，保留出处！