• UID13914
  • 登录2016-12-26
  • 粉丝0
  • 关注0
  • 发帖3
  • 主页
  • 金币22枚
IMWeb团队 发布于2016-11-23 20:46
0/641

浅谈 React、Flux 与 Redux

楼层直达
浅谈 React、Flux 与 Redux
标签:javascript技术

本文作者:imweb ShiJianwen 原文出处:imweb社区 未经同意,禁止转载

React

React 是一个 View 层的框架,用来渲染视图,它主要做几件事情:
  • 组件化
  • 利用 props 形成单向的数据流
  • 根据 state 的变化来更新 view
  • 利用虚拟 DOM 来提升渲染性能

前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?React 中每个组件都有 setState 方法用于改变组件当前的 state,所以可以把更改 state 的逻辑写在各自的组件里,但这样做的问题在于,当项目逻辑变得越来越复杂的时候,将很难理清 state 跟 view 之间的对应关系(一个 state 的变化可能引起多个 view 的变化,一个 view 上面触发的事件可能引起多个 state 的改变)。我们需要对所有引起 state 变化的情况进行统一管理,于是就有了 Flux。

Flux


Flux 是一种应用架构,或者说是一种思想,它跟 React 本身没什么关系,它可以用在 React 上,也可以用在别的框架上。前面说到 Flux 在 React 中主要用来统一管理引起 state 变化的情况。Flux 维护着一个或者多个叫做 Store 的变量,就像 MVC 里面的 Model,里面存放着应用用到的所有数据,当一个事件触发时 ,Flux 对事件进行处理,对 Store 进行更新,当 Store 发生变化时,通常是由应用的根组件(也叫 controller view)去获取最新的 store,然后更新 state,之后利用 React 单向数据流的特点一层层将新的 state 向下传递实现 view 的更新。这里的 controller view 可以有多个也可以不是根组件,但是这样数据流维护起来就比较麻烦。Flux 的思维模型如下:
Flux 主要包括四个部分,Dispatcher、Store、View、Action,其中 Dispatcher 是 Flux 的核心枢纽,它相当于是一个事件分发器,将那些分散在各个组件里面的逻辑代码收集起来,统一在 Dispatcher 中进行处理。完整的 Flux 处理流程是这样的:用户通过与 view 交互或者外部产生一个 Action,Dispatcher 接收到 Action 并执行那些已经注册的回调,向所有 Store 分发 Action。通过注册的回调,Store 响应那些与他们所保存的状态有关的 Action。然后 Store 会触发一个 change 事件,来提醒 controller-views 数据已经发生了改变。Controller-views 监听这些事件并重新从 Store 中获取数据。这些 controller-views 调用他们自己的 setState() 方法,重新渲染自身以及组件树上的所有后代组件。使用 Flux 有个好处就是我只需要用 action 对象向 Dispatcher 描述当前的事件就可以执行对应的逻辑,因为 Dispatcher 是所有 Action 的处理中心,即使没有对应的事件发生,我们也可以“伪造”一个出来,非常利于测试。

Redux


Redux 的作用跟 Flux 是一样的,它可以看作是 Flux 的一种实现,但是又有点不同,具体的不同总结起来就是:1. Redux 只有一个 store Flux 里面会有多个 store 存储应用数据,并在 store 里面执行更新逻辑,当 store 变化的时候再通知 controller-view 更新自己的数据,Redux 将各个 store 整合成一个完整的 store,并且可以根据这个 store 推导出应用完整的 state。同时 Redux 中更新的逻辑也不在 store 中执行而是放在 reducer 中。 2. 没有 DispatcherRedux 中没有 Dispatcher 的概念,它使用 reducer 来进行事件的处理,reducer 是一个纯函数,这个函数被表述为 (previousState, action) => newState,它根据应用的状态和当前的 action 推导出新的 state。Redux 中有多个 reducer,每个 reducer 负责维护应用整体 state 树中的某一部分,多个 reducer 可以通过 combineReducers 方法合成一个根reducer,这个根reducer负责维护完整的 state,当一个 action 被发出,store 会调用 dispatch 方法向某个特定的 reducer 传递该 action,reducer 收到 action 之后执行对应的更新逻辑然后返回一个新的 state,state 的更新最终会传递到根reducer处,返回一个全新的完整的 state,然后传递给 view。
在我看来,Redux 和 Flux 之间最大的区别就是对 store/reducer 的抽象,Flux 中 store 是各自为战的,每个 store 只对对应的 controller-view 负责,每次更新都只通知对应的 controller-view;而 Redux 中各子 reducer 都是由根reducer统一管理的,每个子reducer的变化都要经过根reducer的整合。用图表示的话可以像这样:Flux 中的 store 是这样的:
Redux 中的 store(或者叫 reducer)是这样的: ps:刚接触 React,很多地方了解地不是特别深入,如有错漏,欢迎指正。

0人打赏
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 81030/379   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 45994/191   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 45633/0   Python爬虫:常用浏览器的useragent

  • 42174/261   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 39117/145   省时省力的Android组件群来了,非常棒的原型参考

  • 30592/143   2016抢红包软件及源码

  • 29615/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 29495/2   超全!整理常用的iOS第三方资源

  • 24885/161   Android版类似UC浏览器:非常赞,产品级的源码

  • 23082/31   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 22775/26   Android工程师面试题大全

  • 22748/27   2016程序员跳槽全攻略

  • 22101/10   GitHub上排名前50的iOS项目:总有一款你用得着

  • 21100/21   码魂:程序员的牛B漫画

  • 19343/85   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 19339/74   【持续更新中】Android福利贴(二):资料源码大放送

  • 19196/43   一个绚丽的loading动效分析与实现!

  • 19117/10   2016年最全的Android面试考题+答案 精编版

  • 18903/3   吐槽那些程序员的搞笑牛逼注释

  • 17901/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 17835/104   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 17788/82   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 17760/1   iOS 动画总结

  • 17425/25   个人收集的Android 各类功能源代码

  • 16936/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 16918/23   Android福利第三波【Android电子书】

  • 16733/81   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 16727/1   iOS中文版资源库,非常全

  • 16664/54   基于瀑布流的美女图片浏览App,有注释的源代码

  • 16523/18   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 16506/10   女程序员的梦,众网友的神回复

  • 16233/23   珍藏多年的素材,灵感搜寻网站

  • 16229/11   年会上现场review代码是怎么样的体验!

  • 15887/19   65条最常用正则表达式,你要的都在这里了

  • 15003/16   基于Android支付宝支付设计和开发方案

  • 14427/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 14369/18   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 14171/47   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 13995/62   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 13845/0   GitHub iOS 库和框架Top100 

  • 13694/7   用程序员的姿势抢过年的火车票

  • 13669/7   一张图搞定iOS学习路线,非常全面

  • 13322/10   成为Java顶尖程序员 ,看这11本书就够了

  • 13246/10   微信支付终于成功了(安卓,iOS),在此分享

  • 13138/18   一张图搞定Android学习路线,非常全面

  • 12990/29   【持续更新中】Android福利贴(一):资料源码

  • 12891/4   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 12715/4   46 个非常有用的 PHP 代码片段

  • 12168/3   即时通信第三方库

  • 11585/9   流媒体视频直播方案

  • 11555/18   八个最优秀的Android Studio插件

  • 11398/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 11239/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 11162/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 11093/12   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 10617/1   基于node-webkit跨平台应用案例集之(一)

  • 10345/6   开箱即用!Android四款系统架构工具

  • 10141/11   十大技巧快速提升Android应用开发性能

  • 10131/4   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 10087/2   Android性能优化视频,文档以及工具

  • 返回顶部