平時(shí)一般引入組件都是

import OtherComponent from './OtherComponent '

我們也可以使用React.lazy提供的懶加載方法動(dòng)態(tài)加載組件，例如

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方法需要返回一個(gè)Promis，React.lazy方法需結(jié)合Suspense使用效果最佳。Suspense組件的fallback方法用于組件沒(méi)有加載完成時(shí)頁(yè)面的顯示，可以更好的交互