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重新渲染页面