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