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. JavaWeb项目:Shiro实现简单的权限控制(整合SSM)

    该demo整合Shiro的相关配置参考开涛的博客 数据库表格相关设计  表格设计得比较简单,导航栏直接由角色表auth_role的角色描述vRoleDesc(父结点)和角色相关权限中的权限描述(标记为 ...

  2. 浅谈 JVM 结构体系、类加载、JDK JRE JVM 三者的关系

    一.java类,创建.编译.到运行的工程: 1.随便建一个Java类,保存后就是一个.java文件, 2.然后我们使用 javac命令编译 .java文件,生产 .class文件. 3.再然后使用 j ...

  3. Go语言入门篇-jwt(json web token)权限验证

    一.token.cookie.session的区别 1.cookie Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie. 内存Cookie由浏览器维护, ...

  4. 解决org.apache.subversion.javahl.ClientException的方法【】

    重新刷新项目,配置项目,总是报“The project was not built due to "org.apache.subversion.javahl.ClientException” ...

  5. pip找不到的安装包

    pip install找不到一些python包 可以访问网址,选择python版本自行下载:http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 清华大学开源 ...

  6. Django中Model进阶操作

    一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 pr ...

  7. Python 入门之 内置模块 -- time模块

    Python 入门之 内置模块 -- time模块 1.time模块 ​ time翻译过来就是时间,这个模块是与时间相关的模块 import time # 内置模块 -- 标准库 (1)time.ti ...

  8. Paper Reading_Distributed System

    最近(以及预感接下来的一年)会读很多很多的paper......不如开个帖子记录一下读paper心得 Mark一个上海交通大学东岳网络工作室的paper notebook Mark一个大神的笔记 Ed ...

  9. 剑指offer-二叉搜索树的后序遍历序列-python

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 递归法: 先判断左子树是否存在 再判断右子树是否存 ...

  10. bootstrap table实现iview固定列的效果

    因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang=&q ...