React.lazy的使用方法

平时一般引入组件都是

import OtherComponent from './OtherComponent '

我们也可以使用React.lazy提供的懒加载方法动态加载组件，例如

import React from 'react';
const OtherComponent = React.lazy(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(import('./OtherComponent'));
    }, 2000);
  });
});

class LazyComponent extends React.Component {
  render() {
    return (
      <div>
        <React.Suspense fallback={'加载中'}>
          <OtherComponent />
        </React.Suspense>
      </div>
    );
  }
}
export default LazyComponent;

但是值得注意的是React.lazy方法需要返回一个Promis，React.lazy方法需结合Suspense使用效果最佳。Suspense组件的fallback方法用于组件没有加载完成时页面的显示，可以更好的交互