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;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容