【ES6+ReactJs】第3章：ReactJS入门(2)

1、ReactJS入门
1.1、Model
1.1.1、分层

上图中，左侧是服务端代码的层次结构，由 Controller、Service、Data Access 三层组成服务端系统：
Controller 层负责与用户直接打交道，渲染页面、提供接口等，侧重于展示型逻辑。

Service 层负责处理业务逻辑，供 Controller 层调用。
Data Access 层顾名思义，负责与数据源对接，进行纯粹的数据读写，供 Service 层调用。
上图的右侧是前端代码的结构，同样需要进行必要的分层：

Page 负责与用户直接打交道：渲染页面、接受用户的操作输入，侧重于展示型交互性逻辑。
Model 负责处理业务逻辑，为 Page 做数据、状态的读写、变换、暂存等。
Service 负责与 HTTP 接口对接，进行纯粹的数据读写。

1.1.2、使用DVA进行数据分层管理
dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。官网：https://dvajs.com/
对于dva我们不做过多详细的讲解，我们只要做到能够使用起来就可以了。对于想要全面学习dva框架的同学可自行研究。
首先，我们先将dva框架引入进来，由于umi对dva进行了整合，所以导入就变得非常简单了。
在config.js文件中进行配置：

接下来，创建model文件，在umi中，约定在src/models文件夹中定义model，所以，在 该文件夹下创建ListData.js文件：


下面对List.js进行改造：



流程说明：
1.umi框架启动，会自动读取models目录下model文件，即ListData.js中的数据
[email protected]修饰符的第一个参数，接收一个方法，该方法必须返回{}，将接收到model数据
3.在全局的数据中，会有很多，所以需要通过namespace进行区分，所以通过
state[namespace]进行获取数据
4.拿到model数据中的data，也就是[1, 2, 3]数据，进行包裹{}后返回
5.返回的数据，将被封装到this.props中，所以通过this.props.listData即可获取到
model中的数据
刚刚只是将数据展现出来，如果点击按钮，需要修改state的值，怎么操作呢？ 首先，在model中新增reducers方法，用于更新state中的数据：

接下来修改List.js新增点击事件：



流程梳理如下：

1.1.3、在model中请求数据
前面我的数据是写死在model中的，实际开发中，更多的是需要异步加载数据，那么在
model中如何异步加载数据呢？
首先，创建src下创建util目录，并且创建request.js文件，输入如下内容：（用于异步请 求数据）

然后，在model中新增请求方法：

改造页面逻辑：



查看下请求：

可以看到，返回的是html代码，所以会导致出错。

1.1.4、mock数据
umi中支持对请求的模拟，由于我们现在没有真正的服务可以返回数据，所以才需要模拟。
在项目根目录下创建mock目录，然后创建MockListData.js文件，并且输入如下内容：

进行测试：

发现，可以正常返回数据了。页面效果也正常了: