【项目复盘React】react封装动态组件+组件懒加载(hook版)

使用到的hook： useContext

使用到的api： lazy – React

1.在utils文件夹下新建文件夹testContext

2.新建文件PersonContext.js，导出一个Context对象实例

import React from 'react'
export default React.createContext()

3.新建两个需要条件渲染的页面TestA.js 和 TestB.js，用来测试动态组件

4.新建用于封装动态组件文件Dcomponent.js

思路：

我希望达到的效果是同Vue一样，传入组件名，react就是渲染对应的组件

(1)组件懒加载

根据Vue的动态组件component的思想，首先引入需要动态渲染的组件

import TestA from './TestA.js'
import TestB from './TestB.js

 因为动态组件其实是根据传入条件（组件名）进行对应组件的渲染，如果直接引入所有需要动态渲染的组件会造成不必要的加载，所以此处可用组件懒加载优化，react已经有lazy