如果在react hook模式下动态切换组件？

这里实际上是两个问题

1. 如何动态切换组件
2. 如何异步加载模块

动态切换组件太常见了，特别是需要根据策略渲染不同模块时候，所以这种模式我也称之为策略模式。另外因为你想在用的时候用到哪个模块就引入某个模块(React)，这个需要异步加载模块的支持，异步加载模块一般也就是webpack 的 code splitting 和 react code splitting 两种技术的组合。

但是你这里又需要这个模块是在运行时才确定的，正常情况下你这种是无法实现，因为所有的异步模块都必须提前打包好才能使用，但是 webpack 的 code splitting 具有一定的推导功能，你这里其实已经能够确定动态加载的模块都在某个目录中, 所以不算是完全动态，能够根据本地的文件信息推算出来你会动态引入哪些类型，所以可以让webpack使用特殊的 loading strategies 将这个目录中所有的js文件都打包成异步模块，然后你运行时就可以任意指定这个目录下的模块。

所以你这个问题的解决方案就是 webpack code splitting (开启 eager)+ react lazy suspense 解决

import React, { Suspense, lazy, useState, useCallback } from "react";
import "./styles.css";
export default function App() {
  const [DynamicModule, setDynamicModule] = useState("div");
  const onClick = useCallback((e) => {
    let newName = e.target.dataset.name;
    setDynamicModule(
      lazy(() => import(/* webpackMode: "eager" */ `../modules/${newName}`))
  }, []);
  return (
    <div className="App">
      <button data-name="moduleA" onClick={onClick}>
        按钮 A
      </button>
      <button data-name="moduleB" onClick={onClick}>
        按钮 B
      </button>
          <Suspense fallback={<div>"loading"</div>}>
            <DynamicModule />