精益 React 学习指南 (Lean React)- 1.6 Flux
1.6 flux
这一节将介绍 React 的核心应用架构模式 Flux,包括内容:
最后我们将会把之前的 TODOMVC 改为 Flux 的架构。 1.6.1 Flux 介绍简单来讲,Flux 是 Facebook 引入到 React 中的一种前端架构,通过定义其核心单向数据流的方式,让 React 应用更加健壮。同时,这种应用架构也具有普适性,可以应用到其他任意前端项目中,甚至可以应用到客户端应用开发中,也就是说 Flux 更应该叫做一种架构模式(Pattern)。 1.6.2 MVC 架构之痛在详细介绍 Flux 之前,我们先来看看传统的前端 MVC 架构以及其带来的问题。
概念
流程以 TODOMVC 为例子用户添加一个 todo 的交互流程:
问题对于新增一个 todo ,需要编写一个视图渲染处理函数,函数内添加新项目到列表中。同理对于删除一个 todo,也会有一个处理函数。当业务逻辑变多过后,可能有很多模型需要做增删改的功能,与之对应的就是我们需要精心构建这么多的渲染处理函数。 这种局部更新模式是高性能的关键所在,但问题是:
如何解决如果渲染函数只有一个,统一放在 App 控制器中,每次更新重渲染页面,这样的话:
重渲染也有弊端,会带来严重的性能问题,重渲染和局部渲染各有好坏,对 MVC 来说这是一个两难的选择,无法做到鱼和熊掌兼得。 那如何才能兼顾两种模式的优点? 1.6.3 Flux 架构通过
简单来说在 Flux 架构中直接剥离了控制器层, 概念单向数据流
这是 Flux 架构的核心思想,重上面的图中可以看到,数据的流向从action 到 view 的一个单向流。 Action
Action 可以理解为对应用数据修改的指令,任何修改应用数据的行为都必须需通过触发 action 来修改。Action 可以来自于 View,也可以来自服务端的数据更新。 Action Creator:
为了抽象 Action ,提供一些辅助的语义化的方法来创建 Action,这些辅助方法叫做 Action Creator。 Stores
应用的数据中心,所有应用数据都存放在这里控制,同时包含数据的控制行为,可能包含多个 store Dispatcher
action 的控制者,所有 action 都会通过 dispatcher,由 dispatcher 控制 action 是否应该传入到 store 中,Dispatcher 是一个单例。 View
页面的视图,对应 React 的 Component,视图可以触发 action 到 dispatcher。 需要区别出一种叫控制器 View(Controller View)的类型,这种 View 可以知晓 store 数据,把 store 数据转化为自身的状态,在将数据传递给其他 view 。 并且可以监听 store 数据的改变,当 store 数据改变过后重新设置状态触发重渲染。 可以将控制器 View 对应 MVC 中的控制器,但是差别很大,控制器 View 唯一多做的事情就是监听 store 数据改变,没有其他任何业务处理逻辑。 流程同样以 TODOMVC 的添加 todo 为例,Flux 中的流程为:
对比
Flux 在核心策略上的不同是解决 MVC 架构问题的关键 1.6.4 理解 Flux 架构Flux 架构是非常优雅简洁的,合理利用了一些优秀的架构思维 分而治之(Divide And Conquer)数据的处理过程是 这个是一个典型的分而治之策略,将大的页面拆分为小的模块,再由小的模块拆分为小的组件,具体组件负者组件自身的问题,所有子组件都是自私的,不用关心“大家”,只用关心“小家”。 合而治之 - 中心化控制Flux 把所有的 View 都视作愚民,Store 视作资源的拥有者为统治者,统治者需要提供资源(数据)给平民,但是如果平民企图对资源修改(Mutation),必须得先通知给统治者,让统治者决定是否做处理。 我们为 Flux 中的概念分配角色
一个企图修改资源的操作可以描述为:
平民提交 Mutation 请求,由审核官控制,审核通过后递交给统治者,统治者再分配给亲信做资源 Mutation 合而治之的策略也等于中心化控制策略, 作为统治者既要懂得放权利(资源的分配),也要懂得控制权利(资源的修改),这种收缩自如的合理性是 Flux 简洁的根本。 同时这种思维带来的优点如下:
函数式编程思想在 Flux 中数据的单向流动依赖于 View 的确定性,相同的数据传入相同的组件,得到的结果必然要相同,这是函数式编程的思想。 函数式编程中的纯函数(Pure Function)定义如下:
如: // 纯函数,相同的输入必定有相同的输出 function pure(a,b,c) { return a + b + c; } // 非纯函数,我们永远无法确定 this.a 会变成什么 function notPure(b,c) { return this.a + b + c; } 为了保证组件也能做到 “纯函数” 的特性,相同的属性会得到相同的渲染结果。 在写 React 组件的时候尽量准守一下约定:
函数式的优点也是无副作用组件的优点:
1.6.5 Flux 生态上面已经讲过 Flux 更应该算是 Facebook 提出的一种前端架构模式,而根据这种理念的 Flux 实现有很多,以下是 github star 数较高的一些实现:
后面我们会在第四章中专门讲解 Redux 与 React 的应用。 1.6.6 Flux 与 React 实例@todo (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |