认识Flux模式

传统的前端MVC模式存在一个很严重的问题,就是当项目逻辑越来越复杂时,数据流动很容易变得混乱,而这种问题的解决方案就是只存放一个渲染函数于Controller 中,每次更新重渲染页面,但重渲染容易带来严重的性能与用户体验问题。因此 Facebook提出Flux来解决这个问题。

1. 什么是Flux?

Flux是一套基于dispatcher的前端应用架构模式,它由3大部分组成——dispatcher、store 和 view,其中dispatcher负责分发事件;store 负责保存数据,同时响应事件并更新数据;view负责订阅 store 中的数据,并使用这些数据渲染相应的页面。
Flux的简化流程图如图所示:

Flux流程图.png

  1. dispatcher 与 action
    dispatcher 是 Flux 中最核心的概念,其主要的API有两个,.register(callback)和.dispatch(action),register方法用来注册一个监听器,而 dispatch 方法用来分发一个 action。
  2. store
    store 负责保存数据,并定义修改数据的逻辑。在 Flux 中,store 对外只暴露 getter(读取器)而不暴露 setter(设置器),因此只能读取 store 中的数据而不能进行任何修改。
  3. controller-view
    主要进行 store 与 React 组件(即 view 层)之间的绑定,定义数据更新及传递的方式。它会调用 store 暴露的getter 获取存储其中的数据并设置为自己的 state,在render 时以 props 的形式传给自己的子组件
  4. view
    如果view层操作需要修改数据,则必须使用 dispatcher 分发一个 action,这也是在Flux中唯一修改数据的方式。
  5. actionCreator
    actionCreator是当分发 action 的时候代码有冗余的情况下使用的。将可以重用的action部分代码封装起来,每次修改action只需要在actionCreator 中进行修改即可。

2. 为什么选择Flux模式?

flux的核心思想是数据和逻辑永远单向流动,其模型图如图所示。


Flux模型图

那么Flux是如何解决MVC模式存在的不足呢?主要有两点:

  1. Flux是如何实现单向数据流的呢? Flux 的 dispatcher 定义了严格的规则来限定我们对数据的修改操作。同时,store 中不能暴露 setter 的设定也强化了数据修改的纯洁性,保证了 store 的数据确定应用唯一的状态。
  2. Flux中的view每次重渲染的是Virtual DOM,并由PureRender 保障从重渲染到局部渲染的转换,因此不会影响页面的性能优化。

你可能感兴趣的:(认识Flux模式)