React 异步组件

在项目中某些组件过大影响渲染速度时或者是组件需要懒加载时，可以使用异步组件加载。

在 React 中实现组件异步加载示例：

import React from 'react'

const AsynchronousComp = React.lazy(() => { import('../React_JSX') })

class ReactComp extends React.Component {

  render() {

    /**
     * 1. 使用 React.Lazy 和 import() 来引入组件
     * 2. 使用<React.Suspense></React.Suspense>来做异步组件的父组件，并使用 fallback 来实现组件未加载完成时展示信息
     * 3. fallback 可以传入html，也可以自行封装一个统一的提示组件
     */

    return (
      <div>
        <p>异步加载</p>
        <p>---------------------</p>
        <React.Suspense
          fallback={
            <div>loading...</div>
          }
        >
          <AsynchronousComp />
        </React.Suspense>
      </div>
    )
  }
}

export default ReactComp;