react-loadable簡單實現

什么是react-loadable

npm desc：
A higher order component for loading components with dynamic imports.
一個異步加載component的高階組件

組件拆分

做路由拆分可以達到一定程度的性能優化，loadable本質上做的事組件拆分

基本用法

import Loadable from 'react-loadable';
 
const LoadableBar = Loadable({
  loader: () => import('./components/Bar'),
  loading() {
    return <div>Loading...</div>
  }
});

 
class MyComponent extends React.Component {
  render() {
    return <LoadableBar/>;
  }
}

簡易實現

基本思路，在組件和頁面之間加一層代理，通過文件異步加載實現懶加載

import React, { Component } from "react";

const loadable = ({ loader, loading: Loading }) => {
  return class loadableComponent extends Component {
    state = {
      LoadedComponent: null
    };
    componentDidMount() {
      //loader是一個函數 執行import操作
      loader().then(res => {
        console.log(res.default);
        this.setState({ LoadedComponent: res.default });
      });
    }
    render() {
      const { LoadedComponent } = this.state;
      return LoadedComponent ? <loadedComponent /> : <Loading />;
    }
  };
};
export default loadable;