add:AntD的基本使用
This commit is contained in:
qianguyihao
parent
4f258bfcad
commit
428fd8b9b6
@ -1,6 +1,5 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
VS Code 的全称是 Visual Studio Code，是微软推出的一款免费的、开源的跨平台编辑器。
|
||||
@ -8,19 +7,15 @@ 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**|删除光标之前的整行内容|【荐】|
|
||||
|
||||
|
||||
26
00-前端工具/06-chrome浏览器.md
Normal file
26
00-前端工具/06-chrome浏览器.md
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
|
||||
|
||||
## 控制台的使用
|
||||
|
||||
### 控制台查看源码
|
||||
|
||||
控制台的`Sources`标签可以查看源码。按住快捷键「cmd + P」，可以根据文件名查找源码文件。
|
||||
|
||||
|
||||
|
||||
## 其他
|
||||
|
||||
### show user agent shadow DOM
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
把上图中的红框部分打钩。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
|
||||
|
||||
### show user agent shadow DOM
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
把上图中的红框部分打钩。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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 模块化、组件化
|
||||
|
||||
### 模块
|
||||
|
||||
@ -88,7 +88,7 @@ React 生命周期的截图如下：
|
||||
|
||||
## 组件生命周期的执行顺序
|
||||
|
||||
1、Mounting：
|
||||
**1、Mounting**：
|
||||
|
||||
- constructor()
|
||||
|
||||
@ -98,11 +98,11 @@ React 生命周期的截图如下：
|
||||
|
||||
- componentDidMount()
|
||||
|
||||
2、Updating：
|
||||
**2、Updating**：
|
||||
|
||||
- componentWillReceiveProps(nextProps)
|
||||
- componentWillReceiveProps(nextProps)：接收父组件传递过来的属性
|
||||
|
||||
- shouldComponentUpdate(nextProps, nextState)
|
||||
- shouldComponentUpdate(nextProps, nextState)：一旦调用 setState，就会触发这个方法。方法默认 return true；如果 return false，后续的方法就不会走了。
|
||||
|
||||
- componentWillUpdate(nextProps, nextState)
|
||||
|
||||
@ -110,7 +110,7 @@ React 生命周期的截图如下：
|
||||
|
||||
- componentDidUpdate(prevProps, prevState)
|
||||
|
||||
3、Unmounting：
|
||||
**3、Unmounting**：
|
||||
|
||||
- componentWillUnmount()
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -191,7 +191,9 @@ export default class MyComponent extends React.Component {
|
||||
上方代码中，需要注意的是：当一个函数调用 bind 改变了this指向后，bind 函数调用的结果，有一个【返回值】，这个值，就是被改变this指向后的函数的引用。也就是说： bind 不会修改 原函数的 this 指向，而是改变了 “函数拷贝”的this指向。
|
||||
|
||||
|
||||
## 绑定 this 并给函数传参 的方式三：箭头函数
|
||||
## 绑定 this 并给函数传参 的方式三：箭头函数【荐】
|
||||
|
||||
第三种方式用得最多。
|
||||
|
||||
代码举例：
|
||||
|
||||
|
||||
@ -247,3 +247,7 @@ export default class Movie extends React.Component {
|
||||
|
||||
2019-02-14-ReactDemo.zip
|
||||
|
||||
## 参考链接
|
||||
|
||||
|
||||
|
||||
|
||||
135
13-React基础/08-Ant Design的基本使用.md
Normal file
135
13-React基础/08-Ant Design的基本使用.md
Normal file
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user