• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 比较redux和reflux以及自己写个TinyFlux?

比较redux和reflux以及自己写个TinyFlux?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含reflux,redux,store,view,tinyFlux等相关知识,匿名希望在学习及工作中可以帮助到您
看了redux和reflux,感觉redux好复杂啊,看reflux,1个小时就能弄懂,可是看redux,1天下来都迷迷糊糊的。

感觉flux不就应该是view层发消息给store,store根据消息去修改数据,修改完数据后通知涉及到被修改的view组建刷新state吗。。。

然后我看着reflux的使用方式(它的源代码没怎么看,感觉还是多了),自己写了个tinyFlux。。。二楼附上。。各位看看。。。。可能还太幼稚了。。。欢迎批评啊。。。

回复内容:

谢邀,Flux 相关的轮子已经太多了,实在看不过来,抱歉。

简单说说 Reflux 和 Redux 的区别吧。

之前我在 如何理解 Facebook 的 flux 应用架构? - 知乎用户的回答 里提到过,目前市面上很多 Flux 相关的框架就是把 Dispatcher 隐藏了,然后封装了 Action Creator 和 Component 绑定的细节,简单地说就是「简化 Flux 里冗余的代码和操作」。

Reflux 在实现上面说到的内容的基础上,又提供了很多开发者喜欢的功能,比如 View 监听 Action 这种违背 Flux 概念但是确实在实际应用中很方便的特性。

而 Redux 并不仅仅是「简化 Flux」,它重新定义了 Flux 中每一个角色的功能、职责及实现方式。其中最大的不同是没有 Store 的概念(或者说 Store 不再需要用户去定义),而增加了 Reducer 的概念。Store 会通过我们定义的 Reducer 自动生成,使用 redux.createStore 方法。此外,Redux 定义了一个 middleware 机制,可以让我们在 Action 中更方便的处理业务逻辑。

总结一下就是,如果你觉得目前 Flux 用着不爽太多冗余代码, 那么你写的 TinyFlux 很不错,解决了你的很多问题;然而如果你想拥有更多 redux 带来的新特性,或者说你喜欢并推崇不可变的数据结构,或者说你想显得逼格比较高,那么看懂并会用 redux 绝对是你的不二选择。

PS. redux 确实不错,我们已经开始着手在生产环境中使用了。 Redux 核心概念 深入浅出Redux http://www.w3ctech.com/topic/1561 function createStore (store, ...args) { if (!store) { throw new Error('请定义store'); }; if (typeof store.init === 'function') { store.init(args); }; if (typeof store.actions !== 'function') { throw new Error('actions应该是一个返回一个对象的function,对象里的方法都要用箭头表达式来书写,利用箭头表达式的this绑定。'); }; store.actions = store.actions(); if (store.subscriber || store.emit) { throw new Error('不该存在subscriber和emit'); }; store.subscriber = []; store.emit = function(argument) { store.subscriber.forEach(component => component.reload()); }; return store; } function connect (store, def) { return { getInitialState: function(){ var state = {}; for (var i in def) { try{ state[i] = eval('store.'+def[i]); } catch(err) { console.log(err); } }; return state; }, reload: function() { var state = {}; for (var i in def) { try{ state[i] = eval('store.'+def[i]); } catch(err) { console.log(err); }

您可能想查找下面的文章:

  • 比较redux和reflux以及自己写个TinyFlux?

相关文章

  • 2018-12-03HTML5 Canvas画线技巧——实现绘制一个像素宽的细线_html5教程技巧
  • 2018-12-03解析HTML的增强标记
  • 2018-12-03一款超炫3D旋转立方体动画特效
  • 2018-12-0316个最佳响应式HTML5框架分享
  • 2018-12-03HTML5 网络拓扑图应用实例讲解
  • 2018-12-03H5项目常见问题及注意事项
  • 2018-12-03HTML5移动端-viewport的详解
  • 2018-12-03HTML5 Canvas API速查手册
  • 2018-12-03具体解析HTML5文件读取FileReader及文件读取模块的封装
  • 2017-08-0620佳惊艳的HTML5应用程序示例分享

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5 canvas粒子形成下雪背景的效果
    • 全面解析HTML5的文档结构和新增标签
    • h5的移动端适配怎样实现
    • html5使用canva实现验证码效果(代码实例)
    • h5元素/属性/格式化的详细介绍
    • HTML5 Canvas实现玫瑰曲线和心形图案的代码实例_html5教程技巧
    • 前端性能优化的方法?
    • 逼真的HTML5树叶飘落动画图文代码详解
    • H5与传统html的区别
    • H5里图片中有缝隙应该如何解决

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有