王少飞

2016-05-30 11:57

react 和 redux 入门

本文作者:IMWeb 王少飞 原文出处:IMWeb社区 未经同意,禁止转载


react的核心思想:组件封装。 页面的所有元素都是可以封装成组件 react包含以下几个概念

1 组件
2 JSX
3 Virtual DOM
4 Data Flow

组件

react应用都是构建在组件之上的。页面上,和用户有交互的结构、动态的元素、可以复用的结构,都可以封装成组件。这个组件就是继承react子类的一个类,提供jsx和数据实例化后,通过这个类的api,就可以使用。好处就是,灵活控制。

JSX

直接的表现就是:在js代码中写html代码。这样做的原因就是,比如你要引入一个组件时(比如用户信息木块),直接引入组件js,不用关心html模板,但还是要考虑css。写在js中的html,也并不是直接放到线上页面的,而是经过react处理后,再放到页面的。

Virtual DOM

虚拟dom是react为提升页面渲染性能实现的技术,我们使用react开发时并不需要另外注意什么。

Data Flow

单向数据绑定。是指数据更新后会自动渲染到页面。避免了业务代码中频繁的dom操作。

说到这里都是在说跟页面展示相关的内容。现在的页面,大部分都是动态的,集合了很多后台接口,用户交互,单页等。redux的出现就是来处理页面的数据模型的。


react里面的单向数据绑定,就是说数据模型中的值变化了,会自动更新到页面。但页面中那么多的数据模型,我们怎么管理呢? 比如说数据来源(ajax,local,url参数等),数据修改,数据校验等。数据一多起来,页面同样很难维护。

下面介绍一些redux的一些思想

状态(state)

页面中,由于数据更新,引起的页面的变化。每种不同的变化,对应一种状态。

单一数据源

页面上用的数据,都可以通过一个根元素(store)应用和控制。每个数据,根据不同的类型,或所属模块,在store中,树形存储。并可以指定数据类型。

存储在store中的数据是只读的

存储在store中的数据只能通过唯一的方法(action)修改。action实际是一个js对象字面量,描述了如何对数据做修改。

使用纯函数来执行修改数据

action 只是描述了如何修改数据,谁来实际去修改这些数据,可以定义一个函数(reducer)去实现。纯函数,强调的就是reducer只能按照action描述的那样去修改数据。


粗略的流程

1 用户点击页面的某个元素触发事件
2 生成用户操作的action描述
3 redux根据action描述修改store中的数据
4 数据改变(state跟新)触发react重新渲染页面

3条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。