React总结篇之三_从Flux到Redux-创新互联

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

创新互联建站成都网站建设定制网站开发,是成都网站维护公司,为办公空间设计提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站设计热线:028-86922220

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的唯一性。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享题目:React总结篇之三_从Flux到Redux-创新互联
本文路径:http://scyanting.com/article/dgpojd.html