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

【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 的轻量级前端框架。官网：该文件夹下创建ListData.js文件：

下面对List.js进行改造：

流程说明：

1.umi框架启动，会自动读取models目录下model文件，即ListData.js中的数据

2.@connect修饰符的第一个参数，接收一个方法，该方法必须返回{}，将接收到model数据

3.在全局的数据中，会有很多，所以需要通过namespace进行区分，所以通过

state[namespace]进行获取数据

4.拿到model数据中的data，也就是[1, 2, 3]数据，进行包裹{}后返回

5.返回的数据，将被封装到this.props中，所以通过this.props.listData即可获取到

model中的数据

流程梳理如下：

1.1.3、在model中请求数据

前面我的数据是写死在model中的，实际开发中，更多的是需要异步加载数据，那么在

model中如何异步加载数据呢？

首先，创建src下创建util目录，并且创建request.js文件，输入如下内容：（用于异步请 求数据）

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

改造页面逻辑：

查看下请求：

可以看到，返回的是html代码，所以会导致出错。1.1.4、mock数据

umi中支持对请求的模拟，由于我们现在没有真正的服务可以返回数据，所以才需要模拟。

在项目根目录下创建mock目录，然后创建MockListData.js文件，并且输入如下内容：

进行测试：

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。