如果让你用一句话总结一下什么是flux,该怎么说?

官网上有这样的介绍:flux是一种思想,一种框架,是facebook给react。。。

这样的解释对程序员来说,显得过于抽象又不具体了。

阮老师的文章,也将官网的介绍很好的翻译了一遍。读了以后可以了解到flux是由哪些部分组成(store,dispatcher,action,view)。但就算知道了这些,还是没法很好的解答程序员同学们心中的疑惑,flux到底是什么,用来做什么的,为什么用它,用它有什么好处呢?

如果有一本历史书,写了flux诞生的各个事件,也许事情就没那么复杂了。现在没有这本书,我们使用flux的过程,就像是盲人摸象。那么现在,摸了很久,摸了很多次,很全面的摸过这个大象以后,我们来总结一下我们摸到了什么吧。

1.flux是一个数据中间层,用于规范的管理数据,这些数据往往以状态(state)来呈现。

2.flux不是必须的,但当你使用react或vue等组件化的mvvm框架的时候,flux似乎变得特别的顺手起来。

3.越是复杂的业务逻辑、数据处理、数据模板,越是将你快速的送到flux面前。

总结到一句话就是:flux是一个善于对复杂数据模型进行规范管理的中间层,并且它与组件化的mvvm框架有互补作用

复杂是一个相对的概念。那么复杂到什么地步,我们就需要flux了呢?

来看一个例子:

假定组件化开发程序中,三个不同层级的组件使用了同一个数据对象作为数据模型的一部分。三个组件对共用的数据对象各有操作,又互相影响。

这种情况下有两个比较严重的问题:

1.三个不同组件对数据对象的操作各不相同,操作部分因各个组件环境不同,操作代码将与组件自身的业务代码混在一起。不方便后期维护。

2.换个程序员就很难找齐操作过这部分数据的三个不同位置的组件,以及组件中操作数据的各行代码了。

而使用flux可以统一数据操作接口(action,dispatcher),方便查找操作数据的入口(调用了相同的action/dispatcher),这就解决了上边提出的两点问题,增强了数据的可维护性,可扩展性

再来看一个例子:

例子叫做状态管理好了:一个组件,要undo,redo,进入不同的历史状态。

用户可以手动构建单独的状态管理器,而flux可以通过store,dispatcher,action轻松的实现对状态数据的管理。从这个角度来看,flux又可以被看做是一个复杂状态管理器,只不过flux不局限于管理组件的状态,而是更深层次的将数据与状态视为一体。从mvvm的角度来看,管理数据也是在管理状态

so, flux带给我们的是一种面对复杂问题的解决方案,你get到了吗?

一句话总结flux,以及我们为何需要flux的更多相关文章

  1. 简单了解Flux,注意这是一个设计思想,是一个架构!!!!!

    在RN开发中,我们总是需要去更改一个组件个数据(也就是所谓的状态),我们一般是采用是在初始化的函数constror()(好像拼错了) 在这个函数里面申明我们的初始化数据(状态)eg:this.stat ...

  2. 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品

    http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...

  3. [React] 07 - Flux: uni-flow for react

    相关资源 Ref: [Android Module] 03 - Software Design and Architecture Ref: Flux 架构入门教程 Ref: 详解React Flux架 ...

  4. Flux architecture

    [Flux architecture] Flux is a pattern for managing data flow in your application. The most important ...

  5. springweb flux 服务器推送事件

    以前做服务器推送一般用轮询,后端主动给客户端推送不是很好解决.有时候也可以采用websocket 现在看了springwebflux,用它自带的方法做服务器推送方便多了. 代码如下: import o ...

  6. springweb flux 编程模型

    Spring WebFlux 编程模型是在spring5.0开始,springbot2.0版本设计出来的新的一种反应式变成模型.它脱胎于reactor模式,是java nio 异步编程模型. 传统一般 ...

  7. 理解Flux架构

    本文摘自<Flux架构入门教程>和<谈一谈我对 React Flux 架构的理解>.也有自己的观点和总结.转载请注明出处. 一.Flux架构描述 1. Flux是什么 Flux ...

  8. 从Flux到Redux详解单项数据流

    从Flux到Redux是状态管理工具的演变过程,但两者还是有细微的区别的.但是最核心的都还是观察者模式的应用. 一.Flux 1. Flux的处理逻辑 通俗来讲,应用的状态被放到了store中,组件是 ...

  9. 理顺react,flux,redux这些概念的关系

    作者:北溟小鱼hk链接:https://www.zhihu.com/question/47686258/answer/107209140来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  10. 浅谈 React、Flux 与 Redux

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

随机推荐

  1. [考试反思]1005csp-s模拟测试61:休止

    连续不知道多少场了,都是一场10名以内一场20以外...波动极大...还极有规律... 拿到这套题,看到T1大模拟无话可说. 然后考场上我觉得T2很简单....然后就码了两个半小时. T3数据水了暴力 ...

  2. Vue使用antV G2制作看板

    工作中需要制作一个看板,选型选用antV G2进行开发. 由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用. 1.安装antv/g2 npm install @antv/g2 --sa ...

  3. ftp工具无法连接到Linux服务器

    ftp工具无法连接Linux服务器,文件无法上传,是因为你的ftp服务器未搭建(或未启动) 许久没有登录腾讯云,今天想用xshell的xftp工具上传文件,却突然出现连接不上. 用22端口,可以正常登 ...

  4. H5+app -- 自动更新

    一.最近做了一个app自动更新功能,用的基本都是网上找得到的. 1.h5+ 规范 :  http://www.html5plus.org/doc/zh_cn/maps.html 2.环形进度条插件:h ...

  5. 《计算机网络 自顶向下方法》 第2章 应用层 Part2

    域名.主机名?   从范围上看: 域名的范围比主机名大 一个域名下通常有多个主机名 从组成上看: 主机名 = 服务器名(或计算机名) + 域名 举例说明: baidu.com 是百度的域名 www.b ...

  6. 使用Spring安全表达式控制系统功能访问权限

    一.SPEL表达式权限控制 从spring security 3.0开始已经可以使用spring Expression表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限.Spring ...

  7. pat 1100 Mars Numbers(20 分)

    1100 Mars Numbers(20 分) People on Mars count their numbers with base 13: Zero on Earth is called &qu ...

  8. 802.11r协议理解

    首先阅读了相关协议内容整理出了如下的802.11r时序图所谓基础,然后会详细理解其中的每一个步骤:

  9. iOS核心动画高级技巧-1

    1. 图层树 图层的树状结构 巨妖有图层,洋葱也有图层,你有吗?我们都有图层 -- 史莱克 Core Animation其实是一个令人误解的命名.你可能认为它只是用来做动画的,但实际上它是从一个叫做L ...

  10. 达梦"记录超长"警告

    出现"记录超长"背景介绍: 导入数据库时,出现数据库记录超长警告,导致数据无法正常导入! 1.重新建库,把页大小改大 这种方式是在建立数据库实例的时候进行的 修改[页大小] 2.把 ...