页面前端做什么
页面前端是什么
前端页面是数据的一种表现形式。让数据以一种可见的方式呈现给系统的使用者。用户可以通过前端查看数据,操作(增加,修改,删除)数据。
页面的组件就是表现形式。所以前端页面就是一系列组件的组合。
开发前端是干什么
编写页面就是将数据和页面的这些表现形式绑定起来。将数据绑定在特定的页面组件上;对用户提交的数据修改请求进行响应,改变数据,再把新的数据绑定到页面上。
react干什么
jquery这种前端是通过直接操作dom,来将数据和dom中的组件进行映射。 所有有2步操作:
- 绑定数据
- 生成dom组件
react是通过数据和组件的绑定关系,自动生成dom组件的一个框架。所以我们在编写react组件时,就是在设置数据和dom组件的映射关系。告诉组件怎么显示数据,通过组件怎么提交修改数据的请求。既然是自动生成的dom,所有组件就有一个生命周期。
所以编写react组件要做这几件事情:
- 编写数据和dom组件的映射关系:数据怎么显示到组件,组件怎么显示布局。
- 编写用户可以提交的数据操作请求的方法。
- 其他辅助动作,比如数据的初始化,组件的生命周期方法,等等。
dva干什么
前端是显示数据的,所以前端将显示数据和操作数据分离开,将数据,数据操作全部放到一个地方单独管理起来。每次数据操作之后,先修改数据,再将新的数据告诉react组件。react组件会根据新的数据,重新生成新的dom组件。
dva对数据的管理,是以redux为基础,redux将所有页面的数据以一个树状的结构保存起来(因为对于一个但页面应用,所有的dom组件都是以树状组织起来的。所以数据和dom组件都可以找到一一对应的关系)
所以dva要做这样几件事情:
- 保存数据。
- 提交数据操作请求。操作请求的信息包含一个动作和新的数据(动作+操作数)。新数据的来源有同步和异步。
- 根据新的数据和数据操作请求,更新旧的数据。
- 把新的数据告诉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: