React总结篇之三_从Flux到Redux-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

React总结篇之三_从Flux到Redux

一、Flux
Redux是Flux思想的另一种实现方式,Flux一族框架(包括Redux)贯彻的最重要的观点是单向数据流

创新互联公司成立于2013年,是专业互联网技术服务公司,拥有项目做网站、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元昌宁做网站,已为上家服务,为昌宁各地企业和个人服务,联系电话:18982081108

1.MVC框架的缺陷
MVC是业界广泛接受的一种前端应用框架类型,这种框架把应用分为3个部分:

  • Model(模型)负责管理数据,大部分业务逻辑也应该放在Model中;
  • View(视图)负责渲染用户界面,应该避免在View中涉及业务逻辑;
  • Controller(控制器)负责接受用户输入,根据用户输入调用对应的Model部分逻辑,把产生的数据结果交给View部分,让View渲染出必要的输出。

但是,在实际框架实现中,总是可以允许View和Model直接通信,因此会变得非常混乱!

2.Flux
2.1 Flux包含4个部分:

  • Dispatcher:处理动作分发,维持store之间的依赖关系;
  • Store:负责存储数据和处理数据相关逻辑;
  • Action:驱动Dispatcher的JavaScript对象,代表一个动作的纯数据,action对象必须要有一个名为type的字段(字符串类型);
  • View:视图部分,负责显示用户界面

2.2 Flux的优势与不足
(1)优势:单向数据流。在Flux的理念里,如果想改变界面,就必须改变store中的状态,如果要改变store中的状态,必须派发一个action对象。
(2)不足:store之间依赖关系(如果两个store之间有依赖关系,就必须用上Dispatcher的waitFor函数);难以进行服务器端渲染;store混杂了逻辑和状态。


二、Redux
1.Redux的基本原则:

  • 唯一数据源
  • 保持状态只读
  • 数据改变只能通过纯函数完成

1.1 唯一数据源:
指应用的状态数据应该只存储在唯一的一个store上,所有组件的数据源就是这个store上的状态。store是一个树形的对象,每个组件往往只是用树形对象上的一部分数据。要驱动用户界面渲染,就要改变应用的状态,但是改变状态的方法不是去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装。

1.2 数据改变只能通过纯函数完成:
这个纯函数就是Reducer,在Redux中,每个reducer的函数签名如下:
reducer(state,action)
第一个参数state是当前的状态,第二个参数action是接收到的action对象,而reducer要做的事情,就是根据state和action的值产生一个新的对象返回。reducer只负责计算状态,不负责存储状态。因为reducer是纯函数,函数的返回结果必须由参数state和action决定,而且不产生任何副作用,也不能修改参数state和action对象。

  1. 容器组件和傻瓜组件
    (1)容器组件:和Redux Store打交道,读取Store的状态,用于初始化组件的状态,同时还要监听Store的状态改变;当Store状态发生变化时,需要更新组件状态,从而驱动组件重新渲染;当需要更新Store状态时,就要派发action对象。
    (2)傻瓜组件:根据当前props和state,渲染出用户界面。这是一个纯函数,根据props产生结果。

  2. React-Redux库
    React-Redux两个最主要的功能:
    (1)connect:连接容器组件和傻瓜组件
    (2)Provider:提供包含store的context

3.1 connect:
export default connect(mapStateToProps,mapDispatchToProps)(Counter)
connect是React-Redux提供的一个方法,它接收两个参数mapStateToProps和mapDispatch-ToProps,执行结果依然是一个函数,所以才在后面又加一个圆括号,把connect函数执行的结果立刻执行,这一次参数是Counter这个傻瓜组件。这里有两个函数执行,第一次是connect函数的执行,第二次是把connect函数返回的函数再次执行,最后产生的就是容器组件。
connect函数作为容器组件,做的事情无外乎两件事:
(1)把store上的状态转换为内层傻瓜组件的prop;
(2)把内层傻瓜组件中的用户动作转化为派送给Store的动作,即把内层傻瓜组件暴露出来的函数类型的prop关联上dispatch函数的调用,每个prop代表的回调函数的主要区别就是dispatch函数的参数不同,这就是mapDispatchToProps函数做的事情。

3.2 Provider
React-Redux几乎就是provider。
React-Redux要求store是包含以下3个函数的object:

  • subscribe
  • dispatch
  • getState

另外,React-Redux定义了provider的componentWillReceiveProps函数,React-Redux在componentWillReceiveProps函数中会检查这一次渲染时代表store的prop和上次的是否一样。如果不一样,就会告警,这样做是为了避免多次渲染用了不同的Redux store,每个Redux应用只能有一个Redux store,在整个Redux的生命周期中都应该保持Store的唯一性。


网页题目:React总结篇之三_从Flux到Redux
文章来源:http://kswsj.cn/article/gdidch.html

其他资讯