使用ant design Pro开发项目的小结

1、关于上手。

1. 关于ant design Pro的介绍，本身看官网，大体上能够理解为ant design（组件库） + ant design Pro （完整的项目）+ dva（路由+数据流管理）的组合拳。总之这个Pro是一个已经帮你打通了从搭建到测试打包发布的一整套完整的项目，你只须要站在巨人的肩膀上开发就行了。

2. 按照官网安装好项目以后，就能看到几个页面。进行开发以前，你须要必定的react语法、Js(ES6)、dva的基础。啥？全家桶都不会？不要紧，写页面又不须要你精通全家桶，看完如下连接就开始写页面吧，遇到不会的再去查，这样学比较快。请按照如下顺序食用

• dva知识地图
  
• js快速预览
  
• react快速预览
  
• react小书
  
• dva文档
  
• react中文文档
  
• ES6
• MDN ？？？ MDN有什么好看的？若是你js不太熟，MDN有很全的API能够查阅

2、使用ant design Pro 

以一个ant design Table组件展现数据为例。

这样一个页面，能够看到：左边是导航栏menu组件，右边是主体BasicLayout组件。至于什么是layout，一样，在ant design Pro官网找获得。当你刚安装好antdp的时候已经有几个页面能够参考了。此处：在页面中，有几个按钮，按钮下方是ant design 的Table组件。

1、新建一个页面。

1.在路由中新建一条页面的配置。先不要管报错，由于路由对应的component和models你尚未，继续往下看。

2.新增一条以后，须要去对应的路径新建页面。通常都放在routes文件夹中

例如我新建了一个角色管理的页面，使用connect进行关联models。

3.而后再去models文件夹中新建一个model层文件，注意namespace要对应connect的component

2、数据交互。

这个表格页面使用antd 的table 组件，本身去官网拷贝代码。这里再也不赘述。主要提一下，数据是怎样交互的。

Table组件里面的行数据就是是columns，它有本身的数据格式，你须要把数据格式转换成他规定的那种。在刚装好的项目中有表格的例子你能够参考一下，只不过案例是写死的静态数据。试试看：你把columns里面的数据删除掉，而后从外部获取到数据替换掉。

1.使用生命周期函数componentDidMount在组件挂载时，去请求表格的数据。这里发起一个dispatch 触发action，type的值就是models层中的。

2.在models中会使用antd封装好的方法去请求api.js中定义好的接口地址，而后等待返回就能够处理数据。

此处response拿到服务端返回的结果。你能够在此处对数据进行处理。好比后端返回的并不是是你须要的数据格式，或者你能够进行更高层次的封装。

3.再调用reducers中的save方法将数据存储。经过在UIcomponent中已经进行关联，此时this.props可以取到你传送过去的数据。而后放入Table组件便可。

此处可能讲得不是很详细，好比上述代码各类方法是作什么用的，若是你有仔细看过文章开头列举的文档，尤为是dva文档，心中应该略知一二。此处只介绍了一个很粗略的开发流程，后续我会详细讲解。

3、我的开发思想及心得

1.在使用这套框架开发几个页面以后会明显感受到，框架有点像MVC分层，十分规范！

M层models负责控制数据

V层UIComponent ，and design以及为你准备了丰富的组件库。

C层control，我我的理解为是api层的管理，将全部的须要请求后台数据的接口统一块儿来，很直观也方便调用和修改。

2.ant design Pro几乎已经为你作好了一切，你只须要替换数据、接口，开箱即用。在你切完数个页面以后会发现一个问题：如何进行更高层次的封装呢？不能每次都要复制粘贴不少重复的组件代码呢？

我我的是这样作的：好比说上面举例的表格页面。

首先，我会封装一个函数，函数接收各类字段。好比后端返回一系列的input各类类型的字段给你，你在函数中对字段进行匹配，每一个字段对应到ant design的组件，将数据与组件关联，而后return这个组件。最后将全部的组件push到一个数组中，而后放入render函数，便可渲染出整个页面。

这个函数有点相似于React的HOC高阶组件（传组件和props进去，rerurn新的组件出来）概念，区别是我这里传入的是每一个组件所需的数据而非组件，而return出的是一个组件。

3.多利用无状态组件、函数组件。表格上最后一行，编辑/删除按钮。我是在models层进行处理的，由于columns（Table组件的数据对象）在UIcomponents层已经进行渲染了，我的认为UI组件应该尽可能简化，它只负责渲染数据。我在models层中将columns中的数据进行遍历，在本地构建一个对象（编辑按钮组件、删除按钮组件）与服务端返回的对象进行合并。同时，两个按钮的组件应该自己具有自有的功能，好比在任何一个表格中调用该组件便可使用其功能。合并后将新的colums对象丢给表格组件，这样进行了一个小小的抽象。

在表格上方的按钮，一样是经过函数来输出的按钮组件。按钮具备各自的属性、功能，经过入参来传递给函数，而后经过props设置给组件，来达到复用的目的。

最后，页面上有哪些组件、哪些按钮该如何规定呢？你须要和后端协商好字段、属性，好比一个表单页面有不少种input类型，input会有type、rules（验证规则）....后端返回给你一段组件所需的属性以后，你根据这些数据便可渲染出整个页面的组件。

以上是本人萌新使用ant design Pro的小小经验，可能建立页面的案例讲的不太清晰、抽象封装的思想不知道各位可否明白我所说的。

但愿各位大佬们多多指教。如何进行更高层次的封装呢？每一个页面须要对应路由、models、api接口地址、可否再进行封装达到动态的目的呢？这样连修改接口的重复工做也省了。

感谢阅读。