ant-design-pro 框架入门说明

Ant-design-pro 简述

Pro 是由蚂蚁金服团队出品， 基于dva及ant-design进行开发与维护的脚手架，包含ant-design所有组件使用与封装，是ant-design的最佳实践。Pro致力于打造一款开箱即用的优秀前端开源框架， 但你仍需要掌握dva，react，redux相关基础知识。

Dva是redux数据流解决方案，让redux与react的使用变的简单。因此，即便你不理解redux的过程， 不知道如何与react进行互动，也没关系，你可以先快速上手，基于dva去使用redux来解决状态管理问题。而dva的核心即是model的使用，具体可以参考这篇简书：https://www.jianshu.com/p/21f8ed30e761

 

Pro使用说明：

（1）新增路由与组件
     Pro对路由进行配置提取与管理，如果想新增路由与页面，可以参考config/router.config的配置方式，首先对路由结构进行配置，pro将自动生成菜单及路由，接下来你只需要在Pages中建立相应的组件，并正确配置路径即可。一些复杂场景下，我们可能需要拆分三级路由，你也只需要在页面配置文件中进行配置，在组件中，利用props 获取到 children 子路由的挂载即可，children 在这里你可以理解为Vue 或者 Angular中的router-view。如果你的三级菜单不需要出现在menu中，可以通过在config中添加hideChildrenInMenu属性来控制，路由更多配置如下：

• • name: 当前路由在菜单和面包屑中的名称，注意这里是国际化配置的 key，具体展示菜单名可以在 /src/locales/zh-CN.js 进行配置。
  • icon: 当前路由在菜单下的图标名。
  • hideInMenu: 当前路由在菜单中不展现，默认 false。
  • hideChildrenInMenu: 当前路由的子级在菜单中不展现，默认 false。
  • hideInBreadcrumb: 当前路由在面包屑中不展现，默认 false。
  • authority: 允许展示的权限

 

（2）封装公共组件

  如果一些通用业务如分页，搜索区域布局等，需要基于ant-design组件进行组件的二次封装，你可以再components中创建组件, 进行对应的测试与优化之后，提供给所有人使用。在compeonts中挂载公共组件后，业务中只需要通过 @/components/yourCom 来进行引入即可。

 

（3）Model层

为了降低代码的耦合度，提高可维护性，我们需要将服务层进行分离。在一些大型应用中，一些状态与公共的数据需要进行统一维护，并且由于react本身是通过props进行组件之间的传递， 其本身没有数据回溯的能力，仅能通过自身state进行自管理。为了更好的管理state分管到各个组件中，这种方式就是redux。

由于redux本身使用繁琐，在组件细分的时候，不便于人员维护与管理。dva将redux进行整合，引入model进行数据流管理，将redux整个流转过程进行封装和简化，使用redux-saga的generator来解决异步及链式调用问题(generator是ES6中的新功能)。而react-saga针对redux进行封装和react进行连接，他是一个单独线程，可以通过正常的 redux action 从主应用程序启动，暂停和取消，能访问完整的 redux state，也可以 dispatch redux action。Pro 也是基于dva去进行数据流的管理。

dva Model数据流过程如图 :

                                                  

组件中disaptch => model中 effects触发 =>effects调用service服务接口 => 数据返回到effects 中，effect继续触发 reducer => reducer接受原有state与新的state进行合并，并生成新的state返回 => 组件中state更新。

下面是一个关于model驱动业务的demo，可以提供使用参考：

上图是一个标准的Model封装文件，里面主要分为namespace, subscriptions, state, effects, reducers五部分，分别用于不同的功能。

Demo中首先定义了一个语义化命名空间 publicService，用于处理全局业务，如登录登出等。接下来，在state中定义了全局使用的用户信息与系统语言，JWT_TOKEN验证等。

Effects(副功能)中以* + function的形式定义了generator函数方法，switchLanguage, loginSystem，getUserData等。组件中调用相应业务法：

可以看到，在login组件中使用connect 讲publicService解构挂载在loginCom的props上，接下来使用props上挂载的disaptch方法即触发了publicService下的getUserData方法，Model effects中的getUserData方法继续call(调用)service中的LoginWay(后台api), 或取返回值后，通过callback传递至组件中。同时，进行put，调用Model reducer中getTokenAndInfo , 接受原有state并生产新的state（具体用法可以参考代码）。

注：这里用的connect方法是从dva/connect进行导出，而不是redux，connect本质是在编译阶段创建上下文context来进行传导。与redux的connect本质是一致的。

 

（4）Service 服务层

service层，顾名服务，即是获取服务接口的地方。我们将与后台人员定义接口按照业务、模块或者功能类别进行分类，定义在服务层中，通过在model中调用service中对应的接口来获取相应的数据。而model中调用服务的方式为。Call。具体关于saga更多用法，可以参考下面saga官网的用法：

https://redux-saga-in-chinese.js.org/

 

（5）subscriptions 订阅功能

     当你使用Model进行业务层的开发时，你会发现dva将订阅者模式也封装到业务中，如果你使用Angular 中 Rxjs，这里的用法和那里相似，基本上都是通过订阅来打到数据即时推送和对一些事件进行过滤与处理。

     有了subscription，你可以真正的将组件和业务出来，在订阅中去处理组件的内务，达到真正的高类聚，低耦合的特性。以下是基本用法，仅供参考。

订阅还有很多其他的用法，如多key事件，数据源的监控，后期继续维护与拓展。

 

总结：

总体来说，pro承载dva核心功能，配合ant-design进行封装，将路由、菜单进行分离，在react-router 进入4.0后，通过配置使得开发者仍可以进行静态路由配置。并且将路由引入及plugin配置做的很好，做到看不懂，速度又很快，大概就是好了。达到真正的开箱即用的目的，推荐上手后，直接使用，在使用中理解业务过程。