react根据传参的不同动态注册不同的子组件

上一篇文章介绍了关于Vue如何根据传参的不同动态注册不同的子组件，实现过程请查阅Vue.extend动态注册子组件，由Vue的这个功能我就自然联想到了使用react该如何实现同样的功能呢。其实，用react实现同样的功能会更简单，不用那么多的API，不用去查找这些平时可能用的很少的API的用法，这也是为什么很多人喜欢react的原因，react只提供了一些核心的API，至于怎么实现特定的功能，你自己想办法去实现咯，这就是足够灵活啊！！！

需要导入不同的组件还是用到了import和它的then回调方法，代码如下：

import React, { Component } from 'react'class RegComponent extends Component {
constructor(props){
super(props) this.state = {
component: null,
} regComponentHandle(componentName){
import(`@/pages/${componentName}`).then(res => {
let { default: component } = res;
this.setState({
component,
});
})
} render(){
let C = this.state.component;
let data = {
mgs: "动态组件传参"
}
const props = {...this.props, data}; return (
<div>
<p><button type="button " onClick={this.regComponentHandle.bind(this, 'customHooks')}>动态注册组件</button></p> {C ? <C {...props } /> : null}
</div>
)
}
}export default RegComponent


以上是react有状态组件的实现方法，那么无状态组件也就是函数式组件的实现方法呢？

函数式组件的实现方法要借助react hooks的useState方法来实现：

const RegComponent = () => {
const [component, setComonent] = useState({ Com: null }) const regComponentHandle = (componentName) => {
import(`@/pages/${componentName}`).then(res => {
let { default: component } = res; setComonent({ Com: component }); })
} const { Com } = component return (
<div>
<p><Button type="primary" onClick={() => regComponentHandle('useContext')}>动态注册组件</Button></p>
{Com ? <Com {...props} /> : null}
</div>
);
}export default RegComponent


注意，这里需要特别说明一下：

1、useState方法可以接收一个函数作为参数，但是该函数中的代码只会在初始化时执行一次；

2,、由于useState方法可以接收一个函数作为参数，于是我就想当然的认为可以把一个函数组件作为参数传给useState，也想当然的认为const [component, setComonent] = useState()中的component是可以拿到传过来的函数组件的，结果很出人意料，component可以获取到传过来的参数，但此时的component的值已经不是一个函数组件了，而是一个$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null，当然了，打印出来的component的值不止这些，还有一长串，这里我就不全部贴出来了。很显然，这不是一个组件，好像是一个独一无二（Symbol）的react.element，也就不能显示到页面中了，所以我就绕了一个弯，把拿到的函数组件赋值给一个对象的属性，然后再通过该属性获取到这个函数组件就完美解决了这个问题。

3、说一下为什么用到了react hooks的useState方法，因为函数式组件没有生命周期，没有setState，所以要想在函数式组件中更新数据并实时显示更新后的数据，我能想到的就只有react hooks的useState方法以及dva模式（dva模式就那几个API，用起来很简单，没什么说的）了。