浅谈在React中使用Redux数据流(一)

react

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来唯一决定的。



6、React概述

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

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

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

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

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

方法需要了解生命周期。

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

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

3)各种属性

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


以上是 浅谈在React中使用Redux数据流(一) 的全部内容, 来源链接: utcz.com/z/383003.html

回到顶部