react之组件异步加载

女爷i 2021-09-19 08:42 766阅读 0赞

我们在用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的组件了

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