浅谈在React中使用Redux数据流（一）

太过爱你忘了你带给我的痛 2022-06-15 01:29 200阅读 0赞

1、数据流是什么？为什么要用数据流？

1）数据流是行为与响应的抽象。

用户在页面上输入表单、按下按钮、拖拽等行为，页面会根据用户的行为给出一些响应，如刷新、跳转、局部刷新、Ajax局部刷新、数据更新等。以对象、方法来把它们抽象出来，这就是数据流。

2）使用数据流可以帮助我们明确行为以及行为对应的响应。

这与React的目标——状态图预测是密不可分的。

2、React与数据流的关系

React是纯V的框架，只负责视图，把视图做成了组件化，不涉及任何的数据和控制，需要数据流进行支撑才能完成一个完整的前端项目。

3、主流的数据流框架有哪些？为什么使用Redux？

1）Flux：Facebook在推出React时推出了一套官方适配的、配合React来实现的数据流，现在是一种单项数据流或单向数据绑定的思想，但它非常重、非常大、实用性不太强，因此很多人做了很多改进，出现了很多第三方的数据流框架，比较出名的有reFlux和Redux。

2）reflux

3）Redux：在很多第三方数据流框架中有一些优势：一是非常简单；二是它维护了一棵单一的状态树。

4、单向数据流：

1）MVC

数据放在Model里，View来控制显示，Controller来做整体的管理。

随着系统的庞大，会产生一些问题：交互时，当用户有一个Action时，这个Action会分发到各个Model，如：上网shopping，提交订单这一个动作会分解到有一条订单要记录下来、用户账户会发生变化、优惠信息会发生变化，物流信息会发生变化，会影响库存等。这么多Model都要更新，更新后页面上的多个View也会跟着变化，互相之间也会有影响，可能系统的状态会变得不可预测，不知道下单后页面会发生什么变化。

2）Flux

用户会有各种各样的Action（行为），所有的行为由一个统一的Dispatcher去分发，一个Action只能分发到若干个Store里面，Store保持着数据，也保存着当前页面的状态，根据用户的行为以及页面当前的状态，一个Store只能向视图层传递信息，不允许视图层反回来作用在Store上，视图就会发生变化，再由用户去传入新的Action，这样数据的流向是单向的。

5、Redux概述

Redux其实是Flux框架的一种实现方法。Redux与Flux的思想有点不同。

大概的过程：当一个页面渲染完后，UI出现，用户其实是触发了UI上的一些Action，Action将会被送到Reducers方法里，Reducers将会更新Store，数据就是React开发中的State，State其实是Store的一部分，所有的视图层的东西，也就是组件，其实是由State来唯一决定的。

![Center][]

6、React概述

React可以认为有以下三部分组成：

1）React.createClass()：创建一个React组件

属性this.props用于父子组件之间传递属性；

属性this.state用于表示组件本身的状态，当state变化时，该组件会根据最新的state正确渲染出来；

方法render()中定义组件渲染成什么样子，应该是怎么样的一种呈现，在其中写JSX；

方法需要了解生命周期。

2）ReactDOM.render()：把组件（包括嵌套组件）渲染到页面的某个节点上。

ReactDOM是在0.14版本之后才拆出来的，在之前是只有React，统称为React。

3）各种属性

一般不怎么用到，在此不作叙述。