React的静态模块的同时实现，许多都是采用if else，好的采用广济函数，再Dharmapuri的采用switch case，但随著的更多模块的导入，具体来说import的文档会愈来愈多，其二是switch case的推论组成部分也会愈来愈多，做为两个有崇尚的开发人员屌丝，这当然是无法忍的。
以后采用Vue的这时候Component :is十分称心，接着我的路子就剪影在这下面了，化解辨认出并没较好的API间接采用，历经半天的考察，最后把计划剪影在webpack的require.content上，不专业术语间接上标识符。
* 模块静态化核心理念计划
* author: carry
* update: 2021/08/11 14:40
const files = require.context(“./”, true, /\.jsx$/);
const comps = {};
files.keys().forEach((key) => {
const Comp = files(key).default;
const name = Comp.name && !comps[Comp.name] ? Comp.name : key.replace(/\.\/(.*?)\.jsx/, “$1”);
comps[name] = ;
export default comps;
个第一类中，key采用Jsx export出的function name，假如为空或是多次重复不然采用方向，那个地方性重新命名须要严控，防止多次重复或是象征意义不清的情形造成。
接来下我们再看看采用的地方性
import React from “react”;
import { ContextProvider } from “./reducer”;
import Components from “./components”;
const App = () => {
return (
[“Counter”, “CounterTest”, “Counter1”].map((key) =>
{ return Components[key]; })
};
export default App;
采用require.context的计划好处是文档夹下的模块新增的这时候无需手动导入，这样同时实现才是真正的静态，同样那个计划也可以采用router的静态化，不过下篇见啦。
我是键盘钢琴家，两个把键盘当作钢琴采用的开发人员。富有节奏的键盘敲击声真是悦耳吖。
