3.React.lazy和Suspense进行组件延迟加载

动态导入主要运用的延迟加载方法，对组件来说并不是很适用，但是react.lazy对于组件的加载则有比较大的帮助
但是lazy的suspense并不适合用于服务端的渲染。
Suspense使用的时候，fallback一定存在且有内容的，否则会报错。

import React, { Component, Suspense, lazy } from 'react';
const Other1 = lazy(() => import('./other'));
const Other2 = lazy(() => new Promise(resolve =>
  setTimeout(() =>
    resolve(
      // 模拟ES Module
      {
        // 模拟export default 
        default: function render() {
          return <div>Other2 Component</div>
        }
      }
    ),
    3000
  )
));
class App extends Component {
  render() {
    return (
      <div>
        <h4>一个基本的 lazy 和 suspense 的例子</h4>
        <Suspense fallback={<div>Other1 Loading...</div>}>
          <Other1 />
        </Suspense>
        <h4>一个模拟 lazy 和 suspense 的例子</h4>
        <Suspense fallback={<div>Other2 Loading...</div>}>
          <Other2 />
        </Suspense>
      </div>
    );
  }
}

export default App;