Ant Design 实战教程_笔记

Ant Design 实战教程

Ant Design 实战教程地址：https://www.yuque.com/ant-design/course

名词解释

1. install 安装  美 [ɪnˈstɔːl]

2. export 输出 使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名

3. borderRadius  边界半径    border 边界，镶边； Radius  半径

border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

4.Data Access 数据存储

5.Model 模型

6. concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.

7. dispatch 派遣  dispatch 函数就是和 dva model 打交道的唯一途径。 dispatch 函数接受一个 对象 作为入参，在概念上我们称它为 action，唯一强制要包含的是 type 字段，string 类型，用来告诉 dva 我们想要干什么。我们可以选择给 action 附着其他字段，这里约定用 payload字段表示额外信息。

8.中间件：中间件是一些代码，可以放在接收请求的框架和生成响应的框架之间。

9. yield：产出，让步

10. URI：在于I (Identifier)，是统一资源标示符，可以唯一标识一个资源。

11. URL：在于L (Locater)，一般来说（URL）统一资源定位符，可以提供找到该资源的路径.

12: 函数副作用:

函数副作用是指当调用函数时，除了返回函数值之外，还对主调用函数产生附加的影响。副作用的函数不仅仅只是返回了一个值，而且还做了其他的事情，比如：

1、修改了一个变量

2、直接修改数据结构

3、设置一个对象的成员

4、抛出一个异常或以一个错误终止

5、打印到终端或读取用户输入

6、读取或写入一个文件

7、在屏幕上画图

http://www.fly63.com/article/detial/1176

13. visible: 看得见的

14. decorator: 装饰器

15. field：字段

16. validate：验证

17. margin：边缘

18. bottom：底部

19. CSS modules：

      CSS modules在class名称后加上一个hash值，这个hash值是全局唯一的，比如通过文件路径来获得，这样 class 名称就做到了全局唯一。通过全局唯一的 CSS 命名，我们变相地获得了局部作用域的 CSS（scoped CSS）。如果一个 CSS 文件仅仅是作用在某个局部的话，我们称这样一个 CSS 文件为 CSS module。

20. Less ：

Less 是一个 CSS 的超集，Less 允许我们定义变量，使用嵌套式声明，定义函数等。严格说 Less 包含两部分：

1. Less 的语法。

2. Less 预处理器（Less preprocessor）。浏览器终究只认识 CSS，所以 Less 文件需要经过 Less 预处理器编译成为 CSS。

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

21. CURD：创建（Create）、更新（Update）、读取（Retrieve）和删除（Delete）操作

增删node_modules

1.删除node_modules文件夹：

       在项目根目录cmd运行：

              npm install rimraf --save-dev

              rmdir /s/q node_modules

2.增加node_modules文件夹：

       在项目根目录cmd运行:

cnpm install

笔记

1.JSX 语法的值的部分，只要使用了大括号{}，就表示进入 JS 的上下文，可以写入 JS 代码。

2.组件可以从闭合形式改写为非闭合形式

 

3. this.props.children表示的是当前组件的子节点

https://www.jianshu.com/p/36c28e5e6da3

4.”…”(三个点) 扩展运算符（spread）, 作用：数组或类数组对象（部署了iterator接口）展开成一系列用逗号隔开的参数序列.

5.看到别人的总结（第一章  第一个组件）

6. export default connect(从 model 的 state 中获取数据)(要将数据绑定到哪个组件)

7. mapStateToProps：顾名思义就是把dva model中的state通过组件的props注入给组件。

8. mapDispatchToProps: 以 dispatch 为入参，返回一个挂着函数的对象，这个对象上的函数会被 dva 并入 props，注入给组件使用。

9. this.props.dispatch如果不提供自己的mapDispatchToProps功能，则默认为可用。

https://cloud.tencent.com/developer/ask/86689

10. ref：通过该属性我们可以获取经过 render 后的真实节点的引用。如果 ref 的节点是一个 dom 元素，那么你得到的是文档中真实的 dom 节点，如果 ref 的节点是一个 component，那么你获得将是该 component 渲染后的实例。

11. 对于 css 文件:

             不要在值上使用引号

             号要紧跟 hello，定义一个 class 选择器

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

13. .umirc.js 或 config/config.js 只能二选一

14. let和const命令用于声明变量。

let声明的变量是可变的，const声明的变量是不可变的.

如果const声明的变量指向一个对象，那么该对象的属性是可变的.

const foo = {

  bar: 1

};

foo.bar = 2;

上面代码中，变量foo本身是不可变的，即foo不能指向另一个对象。但是，对象内部的属性是可变的，这是因为这时foo保存的是一个指针，这个指针本身不可变，但它指向的对象本身是可变的。

15. 解构:

      

let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

解构赋值不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: "aaa", bar: "bbb" };

foo // "aaa"

bar // "bbb"

解构赋值时，还可以设置默认值。

      

 let [x, y = 'b'] = ['a']; // x='a', y='b'

上面代码中，变量y解构赋值时没有取到值，所以默认值就生效了。

16.ES6语法要点：

       https://www.yuque.com/ant-design/course/byllph

出现问题

1.安装umi-plugin-react后报错Path must be a string

原因：

       最新的umi是3.x版本，而这个教程用的是2.x的版本。

用cnpm install umi --save-dev这句命令安装umi，默认安装的是最新的3.x版本。

因为版本不同，导致了语法不同，所以报错。

解决办法：

       在package.json里将umi的版本改为2.x，再次运行cnpm install umi --save-dev命令。

这样安装出来的umi版本就是2.x了，问题解决。

 

2.vs code报错：对修饰器的实验支持是一项将在将来版本中更改的功能。设置"experimentalDecorators"选项以删除此警告。

解决办法：

文件  > 首选项  >  设置（ctrl + ,）

搜索experimentalDecorators，设置"javascript.implicitProjectConfig.experimentalDecorators": true，该选项默认为false，需要改为true。

3. antd 报错： Could not find "store" in the context of

解决办法：

目录写错: model —> models  (这个虽然解决了，又引申出Cannot read property 'data' of undefined的错误)

最后，如果设置了singular:true 那么相应的文件夹page就要命名为单数，否则umi默认的就是复数pages、models的命名方法。
model文件夹要放在page目录下。

4.第四章的“图表”小结，因为教程版本太乱，无法进行代码实践。遂阅读文档后跳过。