开源精选：AntdFront —— React 纯 Hook 多标签微前端管理系统解决方案

AntdFront

---

项目动机

使用 React 开发管理系统前端， 选择 Ant Design of React（antd）做 UI 十分常见，然而与其相关的开源项目普遍存在以下问题：

• 大多使用 antd3，使用 antd4 的项目很多还在用 umi2
• 大多处于 class 组件的时代，有的部分使用了 Hook ，权限管理粒度又到不了按钮级
• umi 3 并没有完成数据流的迁移 ,仍然使用 dva，与 Hook 特性配合的并不自然

为解决这些问题，我的同事，一个在前端领域深耕十数年，对技术趋势及各类框架核心思想有着精准把握，长期追求技术优雅与代码简洁的大佬出手写了一套基于 Ant Design Pro ，拥抱纯 React Hook ，实现按钮级权限，整合下一代数据流 Hox 的微前端多标签管理系统，开源并命名为 「AntdFront」。

项目于 2020 年 5 月正式开源，本来大佬不打算推广，在我的撺掇下才写了篇介绍文章，我在此基础上稍微整理、复述一下，为了能够使用推荐卡让更多人看到暂且标注原创。

先说结论，这个项目无论从学习角度还是应用角度看，都是不可多得的福利。

「GitHub 地址」：https://github.com/X-neuron/antdFront

项目作者发布原文：「这可能是你们都在找的：React 纯原生纯hook多标签微前端」

项目展示

注册登录、多标签、国际化、权限控制、微前端等已经全部实现，在此基础上开发管理系统应用十分方便。此外由于各类组件均为原生，执行效率、扩展性、兼容性等方面都具有巨大优势。

项目特点

该项目的突出特点一是原生，二是简洁。

React Hook、函数组件、hox数据流、极简的权限。

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

正如项目作者所说，该项目适合具有强烈求知欲或教狂热的技术洁癖人群。其技术特点总结如下：

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

技术选型背后的考虑在项目作者原文中有详细说明，这里不再赘述。

我们在使用各类框架时往往容易迷失其中，盲目遵循各种约束，分不清什么是可以持续的优秀的思想，什么是有缺陷的、需要优化的做法，因此在不同框架之间的迁移成本极高。

这个项目整合了作者认为具有方向性的技术思想与实践，对理解前端发展趋势、降低学习成本有重要的指导意义。

项目结构

项目结构与 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      

补充说明

• 该项目暂用 JS 编写,保持原生性。如需在 TS 中使用，需自行定义类型。同时也欢迎 TS 版的 pull request
• 由于该项目常使用 ncu 管理依赖，目前less-loader 仍是5.0（因mini-css-extract-plugin)
• 该项目会持续关注业内最新技术，保持对parcel2，webpack5，esbuild ,babel/macros 等的实践跟踪， 一旦稳定，会陆续跟进
• 项目依赖 nanoid 可能对 node 版本要求较高，需要 13.5以上版本，推荐使用 nvm 管理 node 版本，方便自由切换。如不喜欢，可自行替换适合自己的库

项目目前处于初期阶段，欢迎各路大神或是有兴趣、有信心的小伙伴参与其中。同时，我们也会根据后续的实际应用总结新的经验，对它进行进一步的完善。

延伸阅读

React Hook

React 的组件化给前端开发带来了前所未有的体验，我们可以像堆积木一样利用组件搭建出我们想要的系统，既加快了速度，又提高了代码的可读性。

然而，在这种模式下，业务代码与生命周期函数的耦合度随着功能的复杂度逐渐提高，导致很多重复的功能模块无法被抽离复用。为解决这个问题， react 尝试了 mixin、高阶组件两种方案，但同时又衍生了新的问题。

直到 React 16.8 发布，全新的 Hook 特性不仅解决了功能复用问题，还让我们以函数的方式创建组件，可以在不编写 class 的情况下使用 state 以及其它的 React 特性，干净利落地解决了上述问题。

目前，React 16.8 发布已逾一年， 但相关应用实现向新特性的迁移仍需要一段时间。

Hox

Hox 是蚂蚁金服体验技术部提供的下一代数据流方案，目前并未被大规模使用，但其拥抱原生 hook，且仅有 1 个 API，学习成本极低，能轻松应付主要应用场景。

详细分析见项目作者另一篇文章：「React 下一代数据流 hox vs Recoil 使用对比分析」

微前端

在软件工程实践中，处理复杂问题的核心思想是分而治之。类比于微服务架构，微前端就是把日益复杂的前端工程分解为可以独立开发、测试和部署的单元模块的一种架构风格。

上面的动图里，作者演示了在项目中内嵌 Vue 应用，我们可以在此基础上实现更为复杂的系统。