react 异步加载代码组件

最新推荐文章于 2023-07-19 21:45:00 发布

DaXiong1024

最新推荐文章于 2023-07-19 21:45:00 发布

阅读量310

点赞数

分类专栏： JavaScript TS 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/weixin_47076989/article/details/120177399

版权

JavaScript 同时被 2 个专栏收录

39 篇文章

订阅专栏

7 篇文章

订阅专栏

该博客介绍了一种用于React的页面级组件按需异步加载的方法，通过创建一个名为asyncComponent的高阶组件，实现了在组件挂载后异步导入并渲染组件的功能，从而优化应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from 'react'

/**
 * @description: 封装react 页面级组件按需异步加载函数
 * @param {any} importComponent
 * @return {*}
 */
function asyncComponent(importComponent: any) {
  class AsyncComponent extends Component<any, any> {
    constructor(props: any) {
      super(props)

      this.state = {
        component: null
      }
    }

    async componentDidMount() {
      const { default: component } = await importComponent()
      this.setState({
        component: component
      })
    }

    render() {
      const C = this.state.component
      return C ? <C {...this.props}/> : null
    }
  }

  return AsyncComponent
}

export default asyncComponent