zoukankan      html  css  js  c++  java
  • react 实现路由按需加载

    import() 方法:

    1. async.js 文件内容:
    import React from 'react';
    // import "babel-polyfill";
    //componentFactory是一个函数,可以异步加载组件,import方法会返回一个promise,promise完成后会resolve一个对象 {default:组件}
    export default function (componentFactory) {
      class AsyncComponent extends React.Component {
        constructor() {
          super();
          this.state = {component: null};
        }
        async componentDidMount() {
          let {default: component} = await componentFactory();
          this.setState({component});
        }
        render() {
          let Comp = this.state.component;
          return Comp ? <Comp {...this.props}/> : null;
        }
      }
      return AsyncComponent;
    }
    
    1. 使用:
    // 按需加载
    import async from '../async'
    let ButtonDemo = async(() => import("./ButtonDemo"));
    let InputDemo = async(() => import("./InputDemo"));
    
  • 相关阅读:
    Flesch Reading Ease (poj 3371)
    保留道路
    列车调度
    三角形
    高精度加法
    AC自动机(1)
    线段树
    并查集(3)
    并查集(2)
    并查集
  • 原文地址:https://www.cnblogs.com/cag2050/p/8710402.html
Copyright © 2011-2022 走看看