资讯专栏INFORMATION COLUMN

关于Flux,Vuex,Redux的思考

jsbintask / 1393人阅读

摘要:关于的思考是一种前端状态管理架构思想,专门解决软件的结构问题。他们给出了一些库用于实现的思想,并在的基础上做了一些改进。在这些框架里,当前最热门的莫过于和了。

关于Flux,Vuex,Redux的思考

Flux是一种前端状态管理架构思想,专门解决软件的结构问题。
基于Flux的设计思想,出现了一批前端状态管理框架。
他们给出了一些库用于实现Flux的思想,并在Flux的基础上做了一些改进。
在这些框架里,当前最热门的莫过于Redux和Vuex了。
这里是我对Flux,Vuex,Redux的一些思考和总结:

Flux

Flux数据流的顺序是:

View发起Action->Action传递到Dispatcher->Dispatcher将通知Store->Store的状态改变通知View进行改变

ps:基于Flux架构思想写的一个小demo

Redux

Redux相对于Flux的改进:

把store和Dispatcher合并,结构更加简单清晰

新增state角色,代表每个时间点store对应的值,对状态的管理更加明确

Redux数据流的顺序是:

View调用store.dispatch发起Action->store接受Action(action传入reducer函数,reducer函数返回一个新的state)->通知store.subscribe订阅的重新渲染函数

ps:阮一峰老师的Redux+React小demo

Vuex

Vuex是专门为Vue设计的状态管理框架,
同样基于Flux架构,并吸收了Redux的优点

Vuex相对于Redux的不同点有:

改进了Redux中的Action和Reducer函数,以mutations变化函数取代Reducer,
无需switch,只需在对应的mutation函数里改变state值即可

由于Vue自动重新渲染的特性,无需订阅重新渲染函数,只要生成新的State即可

Vuex数据流的顺序是:

View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变(vue检测到数据变化自动渲染)

ps:Vuex官方文档上的小demo

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91296.html

相关文章

  • ReduxFluxVuex

    摘要:结构和数据流一个单向数据流是模式的核心,上面示图应该是程序员心中主要的模型图。 前言 这篇文章不会用具体的代码去阐述redux、flux或者vuex,因为我觉得它们所带来的更是一种编程思想。 前端进化和框架演变 在很久以前,前端没有MVVM的概念,MVVM是对MVC细化的说法(个人觉得两者区别不大),MVC的模式一直在后台使用,效果和优点都很明显。 后来前端工程师仿照MVC模式开发了很...

    joy968 评论0 收藏0
  • Flux,Vuex,Redux

    摘要:是一种前端状态管理架构思想,专门解决软件的结构问题。基于的设计思想,出现了一批前端状态管理框架。他们给出了一些库用于实现的思想,并在的基础上做了一些改进。在这些框架里,当前最热门的莫过于和了。 Flux Flux是一种前端状态管理架构思想,专门解决软件的结构问题。 基于Flux的设计思想,出现了一批前端状态管理框架。他们给出了一些库用于实现Flux的思想,并在Flux的基础上做了一些改...

    anonymoussf 评论0 收藏0
  • VuexFluxReduxRedux-saga、Dva、MobX

    摘要:也就是说不应该有公开的,所有都应该是私有的,只能有公开的。允许使用方法设置监听函数,一旦发生变化,就自动执行这个函数。用一个叫做的纯函数来处理事件。可以通过得到当前状态。在中,同步的表现就是发出以后,立即算出。 这篇文章试着聊明白这一堆看起来挺复杂的东西。在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎。 不管是Vue,还是 React,都需要管理状态(state),比如组件之...

    hiYoHoo 评论0 收藏0
  • react之redux状态管理

    摘要:传统框架的缺陷传统框架的缺陷模型视图控制器的缩写即视图用户看到并与之交互的界面。即模型是管理数据很多业务逻辑都在模型中完成。在的三个部件中,模型拥有最多的处理任务。所有的状态,保存在一个对象里面唯一数据源。1、传统MVC框架的缺陷 模型(model)-视图(view)-控制器(controller)的缩写 V即View视图:用户看到并与之交互的界面。 M即Model模型是管理数...

    J4ck_Chan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<