add:AntD的基本使用

JarodLMN · Feb 22, 2019 · 1fedf3a · 1fedf3a
1 parent 283089d
commit 1fedf3a
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 45 deletions.
diff --git a/00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md → 00-前端工具/02-VS Code的使用.md b/00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md → 00-前端工具/02-VS Code的使用.md
@@ -1,26 +1,21 @@
 
 
-
 ## 前言
 
 VS Code 的全称是 Visual Studio Code，是微软推出的一款免费的、开源的跨平台编辑器。
 
 VS Code 是一款免费的、开源的、高性能的、跨平台的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。
 
 
-
-
 ## 常用插件推荐
 
-
-### Settings Sync 
+### Settings Sync
 
 - 地址：<https://github.com/shanalikhan/code-settings-sync>
 
 - 作用：多台设备之间，同步 VS Code 配置。[荐]
 
 
-
 ### vscode-syncing
 --
 - 地址：<https://github.com/nonoroazoro/vscode-syncing>
@@ -33,7 +28,6 @@ VS Code 是一款免费的、开源的、高性能的、跨平台的、轻量级
 ## 常见主题推荐
 
 
-
 ## 常用快捷键
 
 
@@ -50,3 +44,4 @@ VS Code 是一款免费的、开源的、高性能的、跨平台的、轻量级
 |**option + delete**|删除光标之前的一个单词|英文有效|
 |**command + delete**|删除光标之前的整行内容|【荐】|
 
+
diff --git a/00-前端工具/06-chrome浏览器.md b/00-前端工具/06-chrome浏览器.md
@@ -0,0 +1,26 @@
+
+
+
+## 控制台的使用
+
+### 控制台查看源码
+
+控制台的`Sources`标签可以查看源码。按住快捷键「cmd + P」，可以根据文件名查找源码文件。
+
+
+
+## 其他
+
+### show user agent shadow DOM
+
+![](http://img.smyhvae.com/20180206_1610.png)
+
+
+![](http://img.smyhvae.com/20180206_1616.png)
+
+把上图中的红框部分打钩。
+
+
+
+
+
diff --git a/00-前端工具/chrome浏览器.md b/00-前端工具/chrome浏览器.md
diff --git a/13-React基础/01-React介绍.md b/13-React基础/01-React介绍.md
@@ -1,13 +1,10 @@
 
 
-
-
 ## 虚拟DOM和diff算法
 
 > 在学习 React 之前，我们需要先了解两个概念：虚拟DOM、diff算法。
 
 
-
 ### 虚拟DOM
 
 **问题描述**：
@@ -54,8 +51,6 @@ React内部已经帮我们实现了虚拟DOM，初学者掌握如何调用即可
  - key：key这个属性，可以把 页面上的 DOM节点 和 虚拟DOM中的对象，做一层关联关系。
 
 
-如何对比两颗新旧
-
 ## React 介绍
 
 ### React 是什么
@@ -72,7 +67,7 @@ React内部已经帮我们实现了虚拟DOM，初学者掌握如何调用即可
 
 - Learn Once, Write Anywhere（支持客户端、服务器端渲染）
 
-- 高效
+- 高效的DOM Diff算法，最小化页面重绘
 
 - 单向数据流
 
@@ -96,6 +91,13 @@ React内部已经帮我们实现了虚拟DOM，初学者掌握如何调用即可
 
 上方截图中，有一个特性是“Learn Once, Write Anywhere”。这里的 “Anywhere” 其实指的是两个地方：一个是浏览器端，一个是服务器端。后者指的是，**React支持在服务器端渲染页面**。
 
+### 生态介绍
+
+- Vue生态：Vue + Vue-Router + Vuex + Axios + Babel + Webpack
+
+- React生态：React + React-Router + Redux + Axios + Babel + Webpack
+
+
 ## React 模块化、组件化
 
 ### 模块

diff --git a/13-React基础/03-React组件（一）：生命周期.md b/13-React基础/03-React组件（一）：生命周期.md
@@ -88,7 +88,7 @@ React 生命周期的截图如下：
 
 ## 组件生命周期的执行顺序
 
-1、Mounting：
+**1、Mounting**：
 
 - constructor()
 
@@ -98,19 +98,19 @@ React 生命周期的截图如下：
 
 - componentDidMount()
 
-2、Updating：
+**2、Updating**：
 
-- componentWillReceiveProps(nextProps)
+- componentWillReceiveProps(nextProps)：接收父组件传递过来的属性
 
-- shouldComponentUpdate(nextProps, nextState)
+- shouldComponentUpdate(nextProps, nextState)：一旦调用 setState，就会触发这个方法。方法默认 return true；如果 return false，后续的方法就不会走了。
 
 - componentWillUpdate(nextProps, nextState)
 
 - render()
 
 - componentDidUpdate(prevProps, prevState)
 
-3、Unmounting：
+**3、Unmounting**：
 
  - componentWillUnmount()
 

diff --git a/13-React基础/04-React组件（二）：常见属性和函数.md b/13-React基础/04-React组件（二）：常见属性和函数.md
@@ -485,7 +485,7 @@ export default class Counter extends React.Component {
 ```
 
 
-（2）main.js:
+（2）main.js:（引入组件）
 
 
 ```javascript
@@ -507,7 +507,7 @@ ReactDOM.render(
 ```
 
 
-（3）TestReceiveProps.jsx
+（3）TestReceiveProps.jsx：（组件的定义）
 
 ```javascript
 import React from "react";

diff --git a/13-React基础/05-React中绑定this并给函数传参的几种方式.md b/13-React基础/05-React中绑定this并给函数传参的几种方式.md
@@ -191,7 +191,9 @@ export default class MyComponent extends React.Component {
 上方代码中，需要注意的是：当一个函数调用 bind 改变了this指向后，bind 函数调用的结果，有一个【返回值】，这个值，就是被改变this指向后的函数的引用。也就是说： bind 不会修改 原函数的 this 指向，而是改变了 “函数拷贝”的this指向。
 
 
-## 绑定 this 并给函数传参 的方式三：箭头函数
+## 绑定 this 并给函数传参 的方式三：箭头函数【荐】
+
+第三种方式用得最多。
 
 代码举例：
 

diff --git a/13-React基础/07-React路由的使用.md b/13-React基础/07-React路由的使用.md
@@ -247,3 +247,7 @@ export default class Movie extends React.Component {
 
 2019-02-14-ReactDemo.zip
 
+## 参考链接
+
+
+
diff --git a/13-React基础/08-Ant Design的基本使用.md b/13-React基础/08-Ant Design的基本使用.md
@@ -0,0 +1,135 @@
+
+## andt 的介绍
+
+Ant Design 是基于 React 实现，开发和服务于企业级后台产品。
+
+### 支持环境
+
+- 现代浏览器和 IE9 及以上（需要 polyfills）。
+
+- 支持服务端渲染。
+
+- [Electron](https://electronjs.org/)
+
+
+### 相关链接
+
+- 官方文档：<https://ant.design/docs/react/introduce-cn>
+
+
+### 关于 Electron
+
+Electron（原名为Atom Shell）是GitHub开发的一个开源框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。
+
+很多客户端软件都是基于 Electron 开发的。比如 VS Code。我们打开 VS Code 菜单栏的 “帮助 --> 切换开发人员工具”，就会看到类似于 chrome的调试工具。
+
+
+## andt 的使用
+
+
+
+### 环境安装
+
+```
+npm install antd --save
+```
+
+### 代码示例
+
+我们需要什么组件，就导入该组件即可。
+
+
+（1）index.html:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+
+<body>
+  <!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
+  <div id="app"></div>
+</body>
+
+</html>
+```
+
+
+（2）main.js:
+
+```java
+// JS打包入口文件
+// 1. 导入包
+import React from "react";
+import ReactDOM from "react-dom";
+
+import MyComponent from "./components/MyComponent.jsx";
+
+// 使用 render 函数渲染 虚拟DOM
+ReactDOM.render(<MyComponent></MyComponent>, document.getElementById("app"));
+
+```
+
+
+
+(3)MyComponent.jsx:
+
+```java
+import React from "react";
+
+// 导入 日期选择组件
+import { DatePicker } from "antd";
+
+export default class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>在组件中引入 andt</h3>
+
+        <DatePicker />
+      </div>
+    );
+  }
+}
+
+```
+
+
+代码运行效果：
+
+20190217_1500.png
+
+
+## AntD组件：表格
+
+
+`pagination`属性可以用来分页。
+
+
+### loading框
+
+在数据显示之前，展示 loading；在数据显示之后，关闭loading。
+
+
+## 相关问题的链接
+
+- 面包屑层级显示问题：https://github.com/ant-design/ant-design-pro/issues/1584
+
+
+
+
+
+
+
+
diff --git a/README.md b/README.md
@@ -17,12 +17,3 @@
 
 如果你发现本项目有内容上的错误，欢迎提交 issues 进行指正。
 
-### 学习交流
-
-我建了一个“前端学习”的微信交流群，目前看来，群里的学习氛围很不错。加我微信（bootmei），拉你进群：
-
-- 进群暗号：前端学习
-
-- 进群要求：热爱分享（长期潜水的，就不必了）
-
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -247,3 +247,7 @@ export default class Movie extends React.Component {

		2019-02-14-ReactDemo.zip

		## 参考链接