共计 2281 个字符，预计需要花费 6 分钟才能阅读完成。
写在前面
1 新建页面
1.1 在 src->pages->『新建文件夹』NewPage->『新建 js 文件』NewPage.js 和『新建 less 文件』NewPage.less
1.2 在 NewPage.js 填入如下代码
// 必须引入
import React, {PureComponent} from “react”;
// 面包屑
import PageHeaderWrapper from “@/components/PageHeaderWrapper”;
// 引入阿里 dva 框架，不然不能和服务端交互, 必须引入
import {connect} from “dva”;
// 引入 less
import styles from “./NewPage.less”;
// 这个注解解释起来有点麻烦，但要注意以下几点
// 1.@connect 必须放在 export default class 前面
// 2. 这个不写，你在这个页面里面获取不到服务器返回给你的数据
// 3. 采用解构赋值的方式，第一个参数 newPage 是命名空间，我们数据就是从这里拿到的
@connect(({newPage, loading}) => ({
data: newPage.data, // 将 data 赋值给
loading: loading
}))
class NewPage extends PureComponent {
// componentWillMount 渲染之前调用，一般处理 ajax 异步回来的数据，
// 等下面 render 渲染的时候好绑定
componentWillMount() {
console.log(“ 渲染之前调用 ”);
console.log(“ 之调用一次 ”);
}
// 每次调用 render 之前渲染
componentDidMount() {
// 分发器, 用 dispatch 一定要写 @connect 注解
const {dispatch} = this.props;
// 分发器调用 models 发起请求，具体流程是 dispatch=>models=>services
dispatch({
// newPage 命名空间，fetch 是该文件中的方法，对应 src/models/newPage.js，因为 newPage 的 namespace 的值 newPage
type: “newPage/fetch”,
// 参数，一般采用 json 格式
payload: {a: “1”, b: “2”}
});
}
render() {
let {data,loading} = this.props;
console.log(loading);
return (
<PageHeaderWrapper>
<div>
姓名：{data.userName}<br/>
学号：{data.studentNo}<br/>
年龄：{data.age}<br/>
性别：{data.sex}<br/>
</div>
</PageHeaderWrapper>
);
}
}
export default NewPage;
1.3 在 NewPage.less 填入如下代码
// 样式文件默认使用 CSS Modules，如果需要，你可以在样式文件的头部引入 antd 样式变量文件：
// 这样可以很方便地获取 antd 样式变量并在你的文件里使用，有利于保持页面的一致性，也方便实现定制主题。
@import “~antd/lib/style/themes/default.less”;
2 创建 Models
2.1 在 src->models->『新建 js 文件』NewPage.js
2.2 填入以下代码
// 导入接口文件，并采用解构的方式，
// 将 newPage.js 的文件里面的 queryUser1 赋值给这里的 queryUser1
import {queryUser1} from “@/services/newPage”;
export default {
namespace: “newPage”,
// State 是储存数据的地方，收到 Action 以后，会更新数据。
state: {
data: {}
},
effects: {
/**
* @param payload 参数
* @param call 执行异步函数调用接口
* @param put 发出一个 Action，类似于 dispatch 将服务端返回的数据传递给上面的 state
* @returns {IterableIterator<*>}
*/* fetch({payload}, {call, put}) {
// 访问之前可以做一些操作
const response = yield call(queryUser1, payload);
// 拿到数据之后可以做一些操作
yield put({
// 这行对应下面的 reducers 处理函数名字
type: “save”,
// 这是将最后的处理数据传递给下面的 reducers 函数
payload: response
});
}
// * fetch2({payload}, {call, put}) {
// const response = yield call(queryCurrent);
// yield put({
// type: “saveCurrentUser”,
// payload: response
// });
// }
},
reducers: {
/**
*
* @param state
* @param action
* @returns {{[p: string]: *}}
*/
save(state, action) {
console.log(action);
return {
…state, // es6 三点运算符合，有点模糊解释不清楚
data: action.payload // 上面与服务器交互完的数据赋值给 data, 这里的 data 对应最上面 state 里面的 data
};
}
}
};
