这个前言例子是根据蚂蚁设计(beta版)的实战教程写的。非常感谢大家的付出！谢谢你 　　

　　

　　是江南的美景。花落时学代码。 　　

　　

　　 　　

　　

　　有了前两节的铺垫，这个蚂蚁设计实用教程(beta版)也感觉挺方便的。总结一下写作过程和接下来要进一步学习的内容。 　　

　　

　　第一部分对demo进行了整体概述，这是一个典型的SPA项目，实现了布局、侧边栏、列表、表格、弹出窗口等功能。包括： 　　

　　

　　应用框架：海数据流：DVAJSUI3360Antdumi，中文可以读作乌米，是一个可扩展的企业前端应用框架。海以路由为基础，同时支持配置路由和契约路由，以保证路由功能的完备并扩展其功能。然后用一个生命周期完善的插件系统，覆盖从源代码到构建产品的每一个生命周期，支持各种功能扩展和业务需求。 　　

　　

　　DvaJs首先是基于redux和redux-saga的数据流方案。然后为了简化开发体验，dva内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。 　　

　　

　　Antd是基于Ant Design设计系统的React UI组件库，主要用于研发企业级中后端产品。 　　

　　

　　hhw-4: antd-course hhw $ tree-L 4-I node _ modules。 config #配置文件—config . js —dist——index.html——umi . js——mock —article mock . js —package.jsonarticle model . jschart model . jsjscomplex article model . jspageschartchart class . jscomplexarticle . jseffect是处理这些带有‘副作用’的操作的执行单元。 　　

　　

　　导出默认{命名空间3360' some _ namespace '，状态3360 {}，效果3360 {//定义效果成员' some effect' 3360 function * () {}，其他一些效果' 3360 function * () {}，//.}，减速器3360 {//.}，}宏观上，effect是一层中间件。在本地，效果是一个一个的生成器函数。1.中间层什么是中间层？ 　　

　　

　　“中间件是一些你可以放在接收请求的框架和生成响应的框架之间的代码，” 　　

　　

　　当一个动作被调度时，它会先到达效果来处理副作用，然后效果最终会提示一个新的动作被发出。这个新动作可能被其他效果重新捕获继续处理，也可能被reducer捕获并结束。在任何情况下，最终的处理逻辑都将以reducer结束。 　　

　　

　　2.发电机功能. 　　

　　

　　异步的本质是一个事件导致程序的执行点来回跳转。我们使用回调本质上是一种描述跳跃的手段。生成器函数并没有改变异步的本质，只是改变了描述的方式，使得程序看起来像同步的。 　　

样。

　　

一个 generator function 在执行时有 两方。一方是 generator function 本身，另一方是 generator function 的句柄持有者，而这一般都是框架所持有。我们姑且称这个句柄为 genStub。当框架调用 genStub.next() 时，generator function 会执行到下一个 yield 然后暂停，并把 yield 后面表达式的计算值返还给框架，同时把程序执行权交给框架。框架拿到值后做处理，比如就是异步处理，处理结束拿到结果，再次调用 genStub.next()，返还值给 generator function 同时驱动它恢复执行。当恢复执行时，你可以认为 返回的处理结果会整体替换 yield <expression>，然后程序继续执行到下一个 yield。

　　

　　

yield 这个单词用在这里特别形象：yield 本身有「让步」的意思，也有「产出」的意思。

　　

「generator function yield 到外部的值」和「外部返还给 generator function 的值」不是一回事！！！

　　

3. 使用入参有两个对象，第一个对象就是匹配这个 effect 的 action 对象，因此可以取到约定的 payload 这个字段，第二个对象是 effect 原语集，其中 call, put 最为常用，

　　

call: 阻塞 用于调用异步逻辑，支持 promiseput: 不阻塞 用于触发 action,一般来触发reducer改变stateselect: 不阻塞 用于从 state 里获取数据take: 阻塞 dva封装了take，可以监听action的开始和结束阶段，take会阻塞到监听的事件触发，才执行下一步示例

　　

　　

二、代理在前端开发中，一种常见的规避跨域的方法就是：把 ajax 请求发送到你的本地开发服务器，然后本地开发服务器再把 ajax 请求转发到远端去，从网络拓扑上看本地开发服务器起着「反向代理」的作用。本地服务器和远端服务器是「服务器和服务器间的通信」，就不存在跨域问题了。

　　

配置代理也很简单，只需要您在配置文件 config/config.js 中与 routes 同级处增加 proxy 字段，代码如下，

　　

+ proxy: {+ '/dev': {+ target: 'https://08ad1pao69.execute-api.us-east-1.amazonaws.com',+ changeOrigin: true,+ },+ },配置的含义是：去往本地服务器 localhost:8000 的 ajax 调用中，如果是以 /dev 开头的，那么就转发到远端的 https://08ad1pao69.execute-api.us-east-1.amazonaws.com 服务器当中，/dev 也会保留在转发地址中。

　　

　　

三、二次封装Antd真的很赞！对于开发者而言，公共的代码其实可以二次封装一下，比如from表单等，可以减少不少的代码。

　　

四、CSS Modules

　　

　　

CSS Modules 详解及 React 中实践

　　

CSS MODULES用法教程

　　

CSS modules 将生成全局唯一的hash值【标签实际的class】。通过全局唯一的class name 变相的就可以获取到局部作用域【scoped css】，如果一个 CSS 文件仅仅是作用在某个局部的话，我们称这样一个 CSS 文件为 CSS module。

　　

注意：很多 CSS 选择器是不会被 CSS Modules 处理的，比如 body、div 、a 这样的 HTML 标签名就不会。我们推荐如果要定义局部 css 样式/动画， 只使用 class 或 @keyframe。

　　

Less 官方文档

　　

Less 是一个 CSS 的超集，Less 允许我们定义变量，使用嵌套式声明，定义函数等。严格说 Less 包含两部分：1. Less 的语法。2. Less 预处理器（Less preprocessor）。浏览器终究只认识 CSS，所以 Less 文件需要经过 Less 预处理器编译成为 CSS。

　　

　　

在工具的支持下，一个 Less 文件首先会经过 CSS modules 的编译，把类名全局唯一化，然后才被 Less preprocessor 编译成为 CSS 文件。正因此，Less 文件可以和 CSS modules 无缝联合使用。

　　

　　

// less 文件// 常量@grey-color: rgba(0, 0, 0, 0.25);// 类嵌套.hello { font-size: 32px; font-weight: bold; color: #30b767; .deleted { text-decoration: line-through; background-color: @grey-color; }}// 重写Antd样式.override-ant-btn { // CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。 :global(.ant-btn) { border-radius: 16px; }} <div> <div className={commonStyles.hello}> css module </div> <div className={lessStyles.hello}> <span className={lessStyles.deleted}>Less class 嵌套</span> </div> <div> <p> <span className={lessStyles<'override-ant-btn'>}> <Button>圆角样式按妞</Button> </span> </p> <p> <Button>antd 原始按钮</Button> </p> </div> </div>

　　

最后强调，global 不应该被滥用，特别地我们建议：若想在某个文件中覆盖 antd 样式，请加上一个类似 .override-ant-btn 的类包裹住 global 修饰的名称，以避免全局样式声明分散在项目各处。

　　

还有很多待补充的内容，边做边学