这可能是你们都在找的：React 纯原生纯hook多标签微前端

项目地址：https://github.com/X-neuron/antdFront.git

    项目特点：
    1、采用webpack、babel、antd 等较为原生的配置和函数组件搭建，支持pwa。
    2、极简Hox数据流。
    3、支持json路由动态配置。
    4、页面及按钮级动态权限。
    5、开发环境支持热重载。
    6、提炼路由算法，实现多标签页面路由，支持组件、路由状态保存。
    7、支持国际化(react-intl-universal)。
    8、支持微前端(qiankun)。
    9、代码量小，完整的开发环境，适合作为欲接轨React Hook时代小伙伴参考。

项目适合对象

        该项目适合对搭建前后端分离的管理系统前端有着强烈求知欲或较狂热的技术洁癖人群，在ant design下快速做应用，仍推荐使用umi，因为原生webpack搭建ant design的react开发环境，那痛苦的感觉谁搭谁知道…该项目只整合笔者认为方向性的技术路线，如果不想学习那么多约束，想感受下命运掌握在自己手里的快感，或使用其他UI，或者编写个微前端组件，那么该项目会是一个很好的迁移参考…

项目动机

       笔者在准备基于React开发管理系统时，选择ant design后发现社区里多数是antd3版本，有的到了antd4了，umi又还是2。一直等到ant design pro 的umi 到了3。数据流和权限还没完成迁移。要不就是多还在class组件的时代，有了部分上了hook，权限管理又到不了按钮级，要想基于ant design pro 做个hook版的多标签的微前端，社区里又找不到心仪的解决方案。
       于是与其靠等，干脆在等的时间自己做个…

项目优势

        拥抱react hook，函数组件。hox数据流、极简的权限，改写后的组件，组件代码简洁、易懂，易于解剖学习。动态多标签路由hook，权限组件、权限hook、微前端组件、国际化等非配置的核心代码加起来不超过500行。

项目主要结构

项目结构与 ant design pro 基本保持一致…

├── package.json
├── .babelrc
├── .eslintrc.js
├── .postcss.config.js
├── webpack.config.js
├── webpack.dev.config.js
├── build                    // build文件夹
├── mock                     // mock模拟数据文件夹(mockjs) 真实生产测试环境建议使用其他库
├── public					 // 公开资源文件夹
	└── locales              // 国际化语言配置,后续可调整至/src/locales目录
└── src
    ├── components           // 组件文件夹
    ├── hooks                // 安置自定义的非全局影响的hook
    ├── config
        ├── icons.js         // 主要为了实现routes.js的图标的字符串配置。
        └── pages.js         // 主要为了实现routes.js的路由页面字符串配置。
        └── routes.js        // 可自己设计的路由配置入口。
    └── layouts              // 基础布局组件。用于全局性嵌套路由
    └── models               // 安置全局影响的hook 
        ├── useAccess.js     // 权限配置hook
        ├── useLocale.js     // 国际化hook
        ├── useLogin.js      // 登录状态控制hook
        ├── useTabRoute.js   // 管理多标签状态hook
    └── pages                // 安置业务页面
    └── services             // services API函数
    └── utils                // 一些工具
    └── app.jsx
    └── index.jsx
    └── index.html      
    

常见问题

1、为什么用 antd design
        笔者深度考查过十多个UI, 对 Material UI 、ant design 和 Rsuite 这三个印象很深刻。
        Material UI 项目特点是：技术追新快，React hook 2018年底出的时候，不到半年，Material内核和文档就全部都切换到hook。在UI组件的描述拆分上，设计也十分优雅，非常方便的在其上应用css-in-js、styled-component，主题的切换从来都不是一个问题，对于技术的狂热者而言，它是心目中理想的UI撸码器。但由于没有大公司背景，组件不够丰富，比如 做日期范围选择和级联选择，就需要自己写大量组件，笔者觉得由于v5 可能出现UI引擎的升级，所以建议v5发布后再考虑入手。

        Antd design 在2020年初升级到4.0版，陆续在部分组件中见到了hook。css样式方面，百年不变的less(这里面可能有sketch设计器的考量)，切换主题，往往需要采用大量神技组合，数字input组件依旧无法使用滚轮，antd3的表单，有点不忍直视，4.0表单上Hook后，已经到了能够接受的水平，Antd的强项在于把技术做成产品，真正打动笔者的是message组件，能够像写函数一样(message.info(‘a message’))，调用组件，仿佛一夜间回到了熟悉的Extjs。组件丰富程度堪比私人定制。总体感觉antd design 在技术上不激进，较保守(因为有大量的历史包袱)，小规模实验铺开没问题，才会大规模应用。

        Rsuite是个很不错UI，有着 Material的水波效果，又贴近antd的审美。笔者一度非常喜欢他们的schema-typed描述表单的方式，类似于yup，体积小，代码好读好修改，如果你不想使用formik之类的来管理你的表单，结合schema-typed很容易开发出自己的表单hook(仅供参考)，但是目前4.0版icon是整体打包，体积较大，社区扩展的组件还不够多。

2、为什么没使用Umi
       “原生的,未必是最快的，但往往是最好的”—当创建React的大牛们用面向对象的思维使用JS时，拥抱class语法糖，设计出了组件的生命周期、为解决组件复用，产生了高阶组件等等晦涩难懂的概念，当理解了JS，拥抱函数闭包时，就靠拢了函数组件，就有了Hook…为什么react向函数靠拢，因为函数的闭包特性正好原生的切合了渲染帧状态保存的需求。

        每个框架都其生命周期，每一次的技术迭代，架子虽会不见，但好的思想往往沉淀。比如：ruby 的约束：建个model文件夹，就有模型，建个locale文件夹，就有了国际化。虽然ruby见的不多了，留下的约束思想影响了一代又一代的框架设计，又比如：react的class组件的redux时代，dva、rematch 用起来你会觉得相恨见晚，当react底层升级到hook，这些数据流就用起来就不那么自然了。当你使用的antd design pro未提供相应的特性，而你又迫不及待的想上新技术，结果就只能等待，踩坑，等待…周而复始，循环往复…

        生命有限，不要去重复造轮子，但应当具备造轮子的思想和技术…

3、为什么没使用cra。
        使用 cra 开启antd项目，主要的难点在修改webpack配置，因为less-loader 需要开启javascriptEnabled: true(存在风险的选项)，目前较好的社区方案: react-app-rewired、craco、虽然可以改写部分cra的webpack配置，但是对于启用某些打包性能优化的配置，比如thread-loader 比较困难。笔者在测试时，发现初始化项目只能用yarn。用npm i 则无法安装好依赖。不使用这个脚手架，也是为了努力践行纯原生的原则。

4、数据流为什么选Hox。
        在选择数据流时，笔者尝试过数十个数据流方案，为什么没有选择 dva, rematch,easy-peasy，icestore-next, unstated-next…等等，dva 和 rematch 都是redux思想 优化代码编写的产物，hook时代需要它的思想，而easy-peasy 手工映射state 、 action 与redux connect 的方式如出一辙。甚至connect的方式反而更使得UI和业务model之间的耦合更松散，并且方便装饰器注入。于是找啊找，发现了hox 、unstate-next、icestore-next。对比后，hox 不需要那么多provider 和context，只有1个API更简单。有点类似于 mobox的 订阅 和 hook的结合。使全局状态的代码编写更简洁，即使万一遇到不可调和的问题，迁移到unstate-next 也很方便。hox写法就是原生的Hook，于是天空飘来几个字：“原生的，往往就是最好的”…

5、路由为