ReactJS

最流行的前端框架

umi安装

1
2
3
4
5
# 安装nodeJS
# 安装tyarn,加快下载速度
npm i yarn tyarn -g
# 安装umi
tyarn global add umi

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 生成package.json文件
tyarn init -y

# 项目中添加umi的依赖
tyarn add umi --dev

# 在config目录下创建config.js配置umi
export default {};

# 添加React插件
tyarn add umi-plugin-react --dev

# 在config.js中引入
export default {
plugins: [
['umi-plugin-react', {
}]
]
}

#启动服务
umi dev

# 构建和部署
umi build

umi结构

JSX语法

  • JSX语法就是可以在js文件中插入HTML片段
  • JSX语法可以被Babel转码工具进行转码
  • JSX中所有的标签必须是闭合的并且只能有一个根标签
1
2
3
4
5
export default () => {
const t = () => "world";
// 获取元素使用 { }
return <div>hello { t() }</div>;
}

组件

创建组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';

class Test extends React.Component {
render() {
return (
// this.props.name代表传入的参数
// this.props.children代表标签中包裹的内容
<div>
Test组件
name = {this.props.name}
内容 = {this.props.children}
</div>
)
}
}

export default Test;

使用组件

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import Test from './Test';

class Show extends React.Component {
render() {
return (
// 引用组件,传递参数,标签包裹内容
<Test name="极客小祥">标签包裹的内容</Test>
);
}
}
export default Show;

组件状态

每一个组件都有一个状态,保存在this.state中,当状态的值发生改变时,React框架会自动调用render()方法

  • this.state值的设置要在构造函数中设置
  • 要修改this.state中的值,需要调用this.setState()完成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React from 'react';

class List extends React.Component {
constructor(props) {
// 调用父类的构造
super(props);
this.state = {
dataList: [1, 2, 3],
maxNum: 3
}
}

render() {
return (
<div>
<ul>
{
this.state.dataList.map((value, index) => {
return <li key={index}>{value}</li>;
})
}
</ul>
<button onClick={
() => {
// 获取最大值加1
let newMaxNum = this.state.maxNum + 1;
// 遍历出原来的数组加上一个值
let newList = [...this.state.dataList, newMaxNum];
// 重新设置值
this.setState({
dataList: newList,
maxNum: newMaxNum
});
}
}>点击加1
</button>
</div>
);
}
}

export default List;

Model

在config.js设置开启dva插件

1
2
3
4
5
6
7
8
9
export default {
plugins: [
// 引入插件
['umi-plugin-react',{
// 开启dva插件
dva : true
}]
]
};

model

src/models下创建js文件,umi插件会自动把这个文件下的所有文件都渲成model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
// 设置命名空间,用来区分不同的model
namespace: 'list',
// 数据都放在state中
state: {
dataList: [1, 2, 3],
maxNum: 3
},
// 用来放置函数
reducers: {
addNewData(state) { // state是更新之前的数据
let newMaxNum = state.maxNum + 1;
let newList = [...state.dataList, newMaxNum];
// 更新数据
return {
dataList: newList,
maxNum: newMaxNum
}
}
}

使用model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React from 'react';
// 引入dva插件
import {connect} from 'dva';

// 命名空间
const namespace = 'list';
// 获取参数
const mapStateToProps = (state) => {
// 从models的ListData中取得数据
// 使用state[命名空间].名字 取
const dataList = state[namespace].dataList;
const maxNum = state[namespace].maxNum;
// 返回回去
return {
dataList,
maxNum
};
};
// 获取函数
const mapDispatchToProps = (dispatch) => {
return {
addNewData() {
dispatch({
// 指定 命名空间/函数名
type: namespace + "/addNewData"
});
}
}
};

// 使用修饰器,传递两个参数
@connect(mapStateToProps, mapDispatchToProps)
class List extends React.Component {
render() {
return (
<div>
<ul>
{ // 从props中获取数据
this.props.dataList.map((value, index) => {
return <li key={index}>{value}</li>;
})
}
</ul>
<button onClick={
() => {
// 从props中调用函数
this.props.addNewData();
}
}>
点击加1
</button>
</div>
);
}
}

export default List;

mock数据

umi中支持对请求的模拟,模拟服务端返回的数据

  • 在项目根目录下创建mock目录在里面写js文件
1
2
3
4
5
6
7
8
export default {
'get /ds/list'(req, res) {
res.json({
data: [1, 2, 3, 4],
maxNum: 4
});
}
}

Ant Design

使用

1
2
3
4
5
6
7
8
9
10
11
12
// 在config.js中开启
export default {
plugins: [
// 引入插件
['umi-plugin-react',{
// 开启dva插件
dva : true,
// 开启Ant Design
antd: true
}]
]
};

相关文章

JavaScript基础

JavaScript高级

Jquery基础

Jquery高级

Bootstrap

Ajax和Json

DataTables

Sweetalert2

zTree使用

微信小程序