Vue 动态加载组件的方式

配置动态组件的config

function loadComponent(path) {
  return () => ({
    component: import(`~/plugins${filePath}`),
    // 异步组件加载时使用的组件
    loading: Loading,
    // 加载失败时使用的组件
    error: LoadingError,
    // 展示加载时组件的延时时间 300ms
    delay: 300,
  })
}

按照如下代码方式动态引入组件

// index.jsx 写法
Vue.extend({
  name:'',
  data: {
    ImportModule: {}
  },
  created(){
    this.ImportModule = loadComponent('..')
  },
  render(h) {
    return (<div>{h(ImportModule)}</div>)
  }
})

或者

// index.vue 写法
<template>
  <component :is="importModule"></component>
</template>

<script>
  export default {
    name: '',
    data: {
      importModule: ''
    },
    created() {
      this.importModule = loadComponent('..')
    },
    methods: {}
  }
</script>
<style></style>

react 动态加载组件的方式

旧版使用插件：

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

原理是：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

会被转化为如下代码：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// jsx编译的dom结构转化为虚拟dom对象

react.createElement('div', [props], [react.createElement(...),react.createElement(...)...])

而react.createElement 执行上面的信息会返回虚拟dom

{
   type: div,
   props: {
      onclick,
      class,
      style,
      children: []
   }
}

react.createElement()的第一个参数是tag或者class组件对象或者函数组件对象，如下：

// chunkModule.js 导出函数组件
export default function FunctionComponent() {
    return (<div id="1">hello</div>)
}

以下会被jsx翻译,最终导出的是如下形式

export default function FunctionComponent() {
    return React.createElement('div', {id: "1"}, 'hello')
}

接下来使用webpack的import()将这个文件加载进来：

const loadFunc = () => import("chunkModule.js") 
const FunctionComponent = await loadFunc()

loadFunc 是一个方法，执行返回promise，这个promise完成之后会返回chunkModule.js的内容执行后导出的函数组件 FunctionComponent ( 实践导出的是一个对象，对象有defaut属性，defaut属性才是真正的组件)
拿到了这个函数组件后，接下来就是要在父组件中渲染这个动态加载进来的组件

function LoadableComponent (props) {
    return (<>
        {
            this.loading ? React.createElement(props.loading) : renderAsyncModule(FunctionComponent, props)
        }
    </>)
}

function renderAsyncModule (component, props) {
// 动态加载进来的组件，es6模块的规范，会封装如下形式
    const realComponent = component && component.__esModule ? component.default : component
    return React.createElement(realComponent, props)
}

React 动态加载组件方式2

const LazyComponent =  lazy(() => import('asyncModule.js'))

<Suspense fallback={<div />}>
    <LazyComponent {...props} />
</Suspense> 

Suspense 的原理是利用ComponentDidCatch钩子捕获子组件的异常，这个异常是子组件渲染的时候遇到异步请求抛出的promise

1. 父组件渲染到子组件时发现异步请求,直接抛出错误,捕获的结果是一个Promise对象
2. ComponentDidCatch捕获这个Promise对象,pending状态下渲染fallback的
3. 当resolve时重新render,遇到下一个异步请求重复上面操作
4. 直到整个父组件的抛出的promise对象都为resolve,将loading替换为真正的组件.
   参考(https://blog.csdn.net/deng1456694385/article/details/88999842)