React 加载异步组件（高级）

异步组件

• import
• React.lazy
• React.Suspense

例子

import React from "react";

const ContextDemo = React.lazy(() => import('./ContextDemo'))

class LazyDemo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
      <p>引入一个动态组件</p>
      <hr/>
      <React.Suspense fallback={<div>Loading...</div>}>
        <ContextDemo></ContextDemo>
      </React.Suspense>
    </div>

    // 1、强制刷新，可以看到 loading （看不到就限制一下 chrome 网速）
    // 2、看 network 的 js 加载
  }
}

export default LazyDemo