Ant Design Pro初学经验

一、了解流程、清晰结构

对于初学者而言，如果没有他人的一些对于基础结构的讲解，光是看文档和代码的话，我本人感觉是很吃力的。主要是其中涉及的文件在不同层次之间相互关联很大，同一个函数或者是变量也许在很多页面中都会被引用。如果是没有提前的一个了解的话很难梳理清楚其中的流程是怎么一回事。通常是事倍功半，好半天也不能理清楚思路到底是怎么样的。所以学习ant最初最重要的是了解他的基本架构流程，怎样进行数据之间的交互，怎样完成与服务器的数据交流的、怎样在页面上利用组件完成数据的展示。当然其中涉及的model、service层的数据处理也是必须要了解的。所以建议最好是在学习之前先请教一下他人，只需了解一下一些基础的流程不需要知道的特别的细致，很多东西在搭建自己的第一个页面的时候再慢慢的完善，逐步的学习。

---

二、 props属性、model、dispatch

1.props不可修改
2.model中分为三个部分state、effect、reducer

1.state：表示model的状态数据，可以包含任何类型的值
2.reducer：描述如何改变数据！该函数接受两个参数（state，action） 之前已经累计运算的结果和当前要被累计的值。返回的是一个新的state
3.effect：异步操作（如果是同步行为直接通过reducer改变state，如果是异步行为则先出发effect后流向state）

3.dispatch函数：该函数是一个触发action的函数，而action是改变state的唯一途径。（action必须带有type属性指明具体的行为）

参考网页：https://blog.csdn.net/zwp4381...

三、生命周期、正则

正则在很多地方都有使用、其中包括了表单验证，数据的更改
生命周期可以优化性能分为三种状态：1.初始化 2.更新 3.销毁

初始化：componentWillMount、componentDidMount
更新：componentWillReceiveProps(nextProps)、shouldComponentUpdate(nextProps, nextState).....
销毁：componentWillUnmount()
参考网页:https://www.cnblogs.com/qiaoj...

四、生命周期中数据的变化

基本流程如下

1.UI 组件交互操作；

2.调用 model 的 effect；

3.调用统一管理的 service 请求函数；

4.使用封装的 request.js 发送请求；

5.获取服务端返回；

6.然后调用 reducer 改变 state；

7.更新 model；

8.刷新render。

PS：//获取数据一般是在componentDidMount中调用，数据的加载一般是要等到组件已经挂载到了真实的页面上才可以，如果实在willMount阶段就调用的话会阻碍组件的实例化，阻碍组件的渲染。而且如果用setState的话在will里面触发setstate不会重新渲染