1.为什么要使用状态管路工具
 在跨层级的组件之间传递信息,尤其是复杂的组件会非常困难。也不利于开发和维护,这时我们就a需要用到状态管理工具。
 
 
2.Flux
Flux,它采用的是单向数据流。
 
 
* Actions: 驱动Dispatcher发起改变
* Dispatcher: 负责分发动作(事件)
* Store: 储存数据,处理数据
* View: 视图部分
 
 
Flux数据流的顺序是:
View发起Action  ->  Action传递到Dispatcher  ->  Dispatcher将通知Store 
 ->  Store的状态改变通知View进行改变
 
缺点:
1.一个应用可以拥有多个store,多个store直接可能有依赖关系。
2.Store封装了数据和处理数据的逻辑
 
3.Redux
Redux相对于Flux的改进:
* 把store和Dispatcher合并,结构更加简单清晰
* 新增state角色,代表每个时间点store对应的值,对状态的管理更加明确
 
 
Redux数据流的顺序是:
View调用store.dispatch发起Action  ->   
store接受Action(action传入reducer函数,reducer函数返回一个新的state)  ->  
通知store.subscribe订阅或者react-redux或者context的重新渲染函数
 
 
4.VueX
 
Vuex是专门为vue设计的,它同样基于Flux,并吸收了Redux的优点。
 
Vuex相对于Redux的不同点有:
* 改进了Redux中的Action和Reducer函数,以mutations变化函数取代Reducer,
无需switch,只需在对应的mutation函数里改变state值即可
 
* 由于Vue自动重新渲染的特性,无需订阅重新渲染函数,只要生成新的State即可
 
*vuex是响应式原理,是直接修改data,而redux不直接修改state,而返回一个新的newState。
 
*VUEX是吸收了Redux的经验,放弃了一些特性并做了一些优化,代价就是VUEX只能和VUE配合。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex数据流的顺序是:
View调用store.commit提交对应的请求到Store中对应的mutation函数  ->
store改变(vue检测到数据变化自动渲染)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

状态管理工具对比vuex、redux、flux的更多相关文章

  1. Mobx | 强大的状态管理工具 | 可以用Mobx来替代掉redux

    来源简书 电梯直达 https://www.jianshu.com/p/505d9d9fe36a Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情 ...

  2. Git管理工具对比(GitBash、EGit、SourceTree)(转载)

    Git管理工具对比(GitBash.EGit.SourceTree) GitBash是采用命令行的方式对版本进行管理,功能最为灵活强大,但是由于需要手动输入希望修改的文件名,所以相对繁琐. EGit是 ...

  3. GitBash、EGit、SourceTree三个Git管理工具对比

    Git管理工具对比(GitBash.EGit.SourceTree) GitBash是采用命令行的方式对版本进行管理,功能最为灵活强大,但是由于需要手动输入希望修改的文件名,所以相对繁琐. EGit是 ...

  4. React的状态管理工具

    Mobx-React : 当前最适合React的状态管理工具   MobX 简单.可扩展的状态管理        MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商 ...

  5. Git管理工具对比(GitBash、EGit、SourceTree)

    Git管理工具对比(GitBash.EGit.SourceTree) GitBash是采用命令行的方式对版本进行管理,功能最为灵活强大,但是由于需要手动输入希望修改的文件名,所以相对繁琐. EGit是 ...

  6. vuex状态管理工具

    父子组件之间的通信  props传递  父 向子单向传递:且每次 父组件更新时  子组件的props会跟着更新: 如果需要 子组件把数据传递给父组件,就需要在子组件上绑定自定事件 在子组件使用this ...

  7. Mobx-React : 当前适合React的状态管理工具

    MobX 简单.可扩展的状态管理        MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商所赞助的.    安装 安装: npm install mobx ...

  8. Docker可视化管理工具对比(DockerUI、Shipyard、Rancher、Portainer)

    1.前言 谈及docker,避免不了需要熟练的记住好多命令及其用法,对于熟悉shell.技术开发人员而言,还是可以接受的,熟练之后,命令行毕竟是很方便的,便于操作及脚本化.但对于命令行过敏.非技术人员 ...

  9. Docker的可视化管理工具对比

    Docker的可视化管理工具有DockerUI.Shipyard.Rancher.Portainer等等,这里主要对这几个进行优劣对比. DockerUI: 优点   (1)支持container批量 ...

随机推荐

  1. mysql数据库delete数据时不支持表别名!!!

    mysql数据库delete数据时不支持表别名!!! mysql delete时候 提示语法错误!如下sql: 去掉 表别名的时候: 正确的写法例如: DELETE FROM COMMENTS_REP ...

  2. c# 跨应用程序域通讯

    public class MyTask { public class MyEventArgs : EventArgs { public object EventData { get; private ...

  3. 正则表达式断言(Assertions)

    一 零宽正向先行断言 x(?=y) 仅匹配被y跟随的x. const regExp = /Jack(?=Sparrow|Dawson)/g; const str = 'JackJones JackSp ...

  4. js swich

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. python字符串-方法

    一.1. upper()作用:将字符串中字符转换为大写 In [17]: spam Out[17]: 'hello,world' In [18]: print(spam.upper()) HELLO, ...

  6. C++中的函数重载分析(一)

    1,重载是 C 语言到 C++ 语言的一个飞跃,C 语言中没有重载的概念,所有的函数 名是不允许有重复的,在 C++ 中因为引进了重载,所以函数名可以重复: 2,自然语言中的上下文: 1,你知道上面词 ...

  7. GmSSL Build with VS2017

    使用背景: 最近研究GB35114, 有关于sip协议部分,exosip的已经编译过,由于gb3511中采用的是国密算法,因此这里记录一下GMSSL在windows下的编译过程以及遇到的错误 详细GM ...

  8. idea 代码部分格式化

    效果: 处理Idea使用ctrl+alt+L进行代码格式化时部分代码可以被忽略,不执行格式化功能(webstorm,phpstorm同理) 原因: 有时希望自己写的一些代码不被格式化,或者发现格式化后 ...

  9. python 序列解包(解压缩)

    序列解包(解压缩) 所学的解压缩 如果我们给出一个列表,我们需要一次性取出多个值,我们是不是可以用下面的方式实现呢? name_list = ['nick', 'egon', 'jason'] x = ...

  10. 1. Docker快速入门(仓库,镜像,容器)

    参考阿里云文档:https://help.aliyun.com/document_detail/51853.html?spm=a2c4g.11186623.6.820.RaToNY 参考菜鸟教程文档: ...