Ant Design Pro之架构

[fanchangyong]

​前言

趁着使用Ant Design Pro的时间比较近，趁记忆还比较清晰，打算多写几篇关于它的文章。上篇文章我们主要简单介绍了Ant Design Pro是什么以及入门，这篇文章我们会简单介绍一下组成一个Ant Design Pro程序的各个部分。

为了叙述简单，以下用antd-pro代替Ant Design Pro。

依赖关系

每个现代的js程序都会依赖非常多的外部库，antd-pro当然也不例外。我们这里不会介绍它的所有依赖项，而只会介绍三个最核心的库：

• antd (https://ant.design)

这个不用多说，antd-pro的UI部分都是由一个个的Ant Design组件所拼装而成。也就是说，你在一个antd-pro的项目中看到的页面部分都是Ant Design在工作。

• dva (https://dvajs.com)

dva是基于redux和redux-saga的一个轻量级框架，在antd-pro中的角色是主要负责数据流的处理。所谓数据流，就是指的前端所需要存储的全局状态。比如一个todo的app，前端肯定需要一个展示todo列表的页面。那么这个列表我们就称作前端的“状态”，dva就是用来管理这个前端状态的增删改查操作的一个框架。

• umi (https://umijs.org)

UmiJS算是antd-pro的一个中间层组件，它把antd的UI部分和dva的数据逻辑部分封装成了一个个大的“区块”，供我们直接添加到项目中。一个区块，可以粗略的理解为我们项目中的一个页面。我们在antd-pro中添加页面的时候执行的命令就是npx umi block add BlockName，这句命令的意思是添加一个umi的区块，而在umi的代码中写死了一个默认的寻找block的地址:https://github.com/ant-design/pro-blocks。这个仓库中存储了所有antd-pro中提供的所有区块。

总结

上篇文章中我们已经讲过，antd-pro是一个开箱即用的框架。这里的开箱即用意思是它生成出来的代码是可以独立运行的一个完整前端程序，而不是像React或Ant Design那样是一个“库”，只能作为一个程序的组成部分被其他部分调用才能组成一个完整的程序。antd-pro做的其实是一个集成的工作，把三大核心框架组合起来供用户直接使用。

上面提到的三个项目我觉得是组成Ant Design Pro的三大基石，不严谨地说分别扮演了M(dva)V(antd)C(umi)的角色。这里其实只是大概讲述了一下他们之间的关系，之后我会针对每个框架单独再出一篇文章。

---

最后推广一下自己微信公众号：<前端时光机>，所有文章都在那里首发，所以如果感兴趣请扫码关注：