react dva 基本介绍

页面前端做什么

页面前端是什么

前端页面是数据的一种表现形式。让数据以一种可见的方式呈现给系统的使用者。用户可以通过前端查看数据，操作（增加，修改，删除）数据。

页面的组件就是表现形式。所以前端页面就是一系列组件的组合。

开发前端是干什么

编写页面就是将数据和页面的这些表现形式绑定起来。将数据绑定在特定的页面组件上；对用户提交的数据修改请求进行响应，改变数据，再把新的数据绑定到页面上。

react干什么

jquery这种前端是通过直接操作dom，来将数据和dom中的组件进行映射。 所有有2步操作：

1. 绑定数据
2. 生成dom组件

react是通过数据和组件的绑定关系，自动生成dom组件的一个框架。所以我们在编写react组件时，就是在设置数据和dom组件的映射关系。告诉组件怎么显示数据，通过组件怎么提交修改数据的请求。既然是自动生成的dom，所有组件就有一个生命周期。

所以编写react组件要做这几件事情：

• 编写数据和dom组件的映射关系：数据怎么显示到组件，组件怎么显示布局。
• 编写用户可以提交的数据操作请求的方法。
• 其他辅助动作，比如数据的初始化，组件的生命周期方法，等等。

dva干什么

前端是显示数据的，所以前端将显示数据和操作数据分离开，将数据，数据操作全部放到一个地方单独管理起来。每次数据操作之后，先修改数据，再将新的数据告诉react组件。react组件会根据新的数据，重新生成新的dom组件。

dva对数据的管理，是以redux为基础，redux将所有页面的数据以一个树状的结构保存起来（因为对于一个但页面应用，所有的dom组件都是以树状组织起来的。所以数据和dom组件都可以找到一一对应的关系）

所以dva要做这样几件事情：

1. 保存数据。
2. 提交数据操作请求。操作请求的信息包含一个动作和新的数据（动作+操作数）。新数据的来源有同步和异步。
3. 根据新的数据和数据操作请求，更新旧的数据。
4. 把新的数据告诉react组件。

dva怎么做

dva将树状结构数据，拆分成不同的数据块管理起来。每个数据块通过一个model组织起来（通常model会和react的组件对应起来）。

每个model中包含这些东西：

• namespace 这个数据块对应到整个树状数据的哪一个块。
• state 这个model要管理的数据。
• effect 异步调用的操作。
• reducers 响应动作后对数据的操作。

dva+react怎么用

• 使用react编写组件。
• react以dva要求的操作方式（dispatch）和数据格式（action+state），提交修改数据的请求。
• 使用dva编写model。
• 将组件和model关联起来，交给dva来管理（connnect）。

---

相关链接： react:

https://reactjs.org/tutorial/tutorial.html

https://doc.react-china.org/docs/components-and-props.html

redux:

http://cn.redux.js.org/docs/basics/UsageWithReact.html

dva:

https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md

es6:

http://es6.ruanyifeng.com/#docs/intro