`
weitao1026
  • 浏览: 1043358 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

React Flux 架构的理解

 
阅读更多

React Flux架构简介

React 简介请戳这里

Flux是什么

Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就可以快速的上手Flux。

Flux的核心部分

 

flux-simple-f8-diagram-explained-1300w.jpg

1. dispatcher

事件调度中心,flux模型的中心枢纽,管理着Flux应用中的所有数据流。它本质上是Store的回调注册。每个Store注册它自己并提供一个回调函数。当Dispatcher响应Action时,通过已注册的回调函数,将Action提供的数据负载发送给应用中的所有Store。应用层级单例!!

2. store

负责封装应用的业务逻辑跟数据的交互。

  • Store中包含应用所有的数据

  • Store是应用中唯一的数据发生变更的地方

  • Store中没有赋值接口---所有数据变更都是由dispatcher发送到store,新的数据随着Store触发的change事件传回view。Store对外只暴露getter,不允许提供setter!!禁止在任何地方直接操作Store。

3. view

  • controller-view 可以理解成MVC模型中的controller,它一般由应用的顶层容器充当,负责从store中获取数据并将数据传递到子组件中。简单的应用一般只有一个controller-view,复杂应用中也可以有多个。controller-view是应用中唯一可以操作state的地方(setState())

  • view(UI组件) ui-component 职责单一只允许调用action触发事件,数据从由上层容器通过属性传递过来。

4. 其他

action creators 作为dispatcher的辅助函数,通常可以认为是Flux中的第四部分。ActionCreators是相对独立的,它作为语法上的辅助函数以action的形式使得dispatcher传递数据更为便利。

How Flux(Unidirectional Data Flow) Works

flux-diagram-white-background.jpg

view --> actionCreators

QQ截图20150928105114.jpg

action dispatch

1
2
3
4
5
6
7
8
9
10
11
12
13
// NavActionCreators.js
export default {
 
  clickNav(nav){
 
    AppDispatcher.dispatch(
      {
        type: ActionTypes.CLICK_NAV,
        nav
      }
    );
  }
};

dispatcher --> store callback

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
AppDispatcher.register(action => {
 
  switch (action.type) {
 
    // nav点击
    case ActionTypes.CLICK_NAV:
 
      IndexWebAPIUtils.getGiftList(_currentUserInfo.userId, action.nav.id)
        .then(function (giftList) {
 
          _currentGiftList = giftList;
          IndexStore.emitChange();
        });
 
      break;
 
    // no default
  }
});

store emitChange --> controller view --> setState

QQ截图20150928105214.jpg

Flux vs MVVM

MVVM

1. 简单的MVVM

flux1.jpg

2. 复杂的MVC

 

flux2.jpg

Flux

1. 复杂的Flux

flux3.jpg

Flux的优势

1. 数据状态变得稳定同时行为可预测

因为angular双向绑定的原因,我们永远无法知道数据在哪一刻处于稳定状态,所以我们经常会在angular中看到通过setTimeout的方式处理一些问题(其实有更优雅的解决方案,不在本次讨论之内)。同时由于双向绑定的原因,行为的流向我们也很难预测,当视图的model变多的时候,如果再加上一堆子视图依赖这些model,问题发生时定位简直是噩梦啊(这也是angular的错误信息那么不友好的原因,因为框架开发者也无法确定当前行为是谁触发的啊,绑定的人太多了...)。但是这里还是要强调一点就是,并不是说双向绑定就一定会导致不稳定的数据状态,在angular中我们通过一些手段依然可以使得数据变得稳定,只是双向绑定(mvvm)相对于flux更容易引发数据不稳定的问题。

2. 所有的数据变更都发生在store里

flux里view是不允许直接修改store的,view能做的只是触发action,然后action通过dispatcher调度最后才会流到store。所有数据的更改都发生在store组件内部,store对外只提供get接口,set行为都发生在内部。store里包含所有相关的数据及业务逻辑。所有store相关数据处理逻辑都集中在一起,避免业务逻辑分散降低维护成本。

3. 数据的渲染是自上而下的

view所有的数据来源只应该是从属性中传递过来的,view的所有表现由上层控制视图(controller-view)的状态决定。我们可以把controller-view理解为容器组件,这个容器组件中包含若干细小的子组件,容器组件不同的状态对应不同的数据,子组件不能有自己的状态。也就是,数据由store传递到controller-view中之后,controller-view通过setState将数据通过属性的方式自上而下传递给各个子view。

4. view层变得很薄,真正的组件化

由于2、3两条原因,view自身需要做的事情就变得很少了。业务逻辑被store做了,状态变更被controller-view做了,view自己需要做的只是根据交互触发不同的action,仅此而已。这样带来的好处就是,整个view层变得很薄很纯粹,完全的只关注ui层的交互,各个view组件之前完全是松耦合的,大大提高了view组件的复用性。

5. dispatcher是单例的

对单个应用而言dispatcher是单例的,最主要的是dispatcher是数据的分发中心,所有的数据都需要流经dispatcher,dispatcher管理不同action于store之间的关系。因为所有数据都必须在dispatcher这里留下一笔,基于此我们可以做很多有趣的事情,各种debug工具、动作回滚、日志记录甚至权限拦截之类的都是可以的。

Flux的困境

1. 过多的样板代码

flux只是一个架构模式,并不是一个已实现好的框架,所以基于这个模式我们需要写很多样板代码,代码量duang的一下子上来了。。不过好在目前已经有很多好用的基于flux的第三方实现,目前最火的属redux。

2. dispatcher是单例

dispatcher作为flux中的事件分发中心,同时还要管理所有store中的事件。当应用中事件一多起来事件时序的管理变得复杂难以维护,没有一个统一的地方能清晰的表达出dispatcher管理了哪些store。

3. 异步处理到底写在哪里

按flux流程,action中处理:依赖该action的组件被迫耦合进业务逻辑

按store职责在store中处理:store状态变得不稳定,dispatcher的waitFor失效

4. 至今还没有官方实现

写在最后

前端摩尔定律:前端每18个月难度增加一倍

分享到:
评论

相关推荐

    React Flux的一些理解1

    1. Dispatcher:Dispatcher是整个Flux架构的核心,可以视为数据流的总指挥。它负责接收来自View层的动作(Action),并将这些动作分发给相应的Store。Dispatcher具有注册Store回调函数的功能,当Action被触发时,...

    react+flux in action - by jeremy

    React与Flux相结合不仅提供了一种高效且易于理解的前端开发方式,还解决了许多传统框架存在的问题。无论是对于初学者还是资深开发者,React与Flux都是一种值得学习和使用的前端技术栈。随着这两项技术的不断成熟和...

    react-flux-boiler-plate:简单的 React Flux Boiler 板来理解 Flux 架构的概念

    React通量锅炉板简单的 React Flux Boiler 板来理解 Flux 架构的概念。 应用程序很简单,在按钮上单击我们正在生成随机数,并且生成的内容正在以“/”分隔的方式附加到 UI 中。 我们在这里学到的概念是组件之间的...

    react-flux-simple-example

    总结来说,"react-flux-simple-example"是一个展示如何在React中运用Flux架构的实例。它演示了如何通过Flux的各个组件来实现数据的单向流动,从而提高代码的可维护性和可测试性。通过理解这个示例,开发者可以更好地...

    Flux架构实现大小约1k

    Flux架构是Facebook在2014年推出的一种用于构建用户界面的架构模式,主要应用于React应用程序中。这个“Flux架构实现大小约1k”的主题意味着它提供了一个极简的、轻量级的Flux实现,使得开发者能够在不增加大量代码...

    React-Flux-App:使用Flux架构的React应用程序-Flux

    React-Flux-App是一个基于React库和Flux架构构建的应用程序示例。React是由Facebook开发的用于构建用户界面的JavaScript库,而Flux是一种专为React设计的单向数据流架构模式。在这个项目中,我们将深入探讨这两个...

    react-flux-stores:使用 React Flux 构建简单的商店

    通过这个项目,开发者可以学习如何使用React Flux架构构建一个简单的商店应用,了解如何组织代码,以及如何在React组件和Flux Store之间传递数据。同时,这也能帮助理解Flux如何解决传统 MVC(Model-View-Controller...

    React全栈 Redux Flux webpack Babel整合开发

    Flux是一种由Facebook提出的架构模式,旨在解决大型React应用中的状态管理问题。Flux强调单向数据流,数据从服务器流向dispatcher,再到stores,最后到views(React组件)。与Redux不同的是,Flux有多个store,每个...

    React的一个类似Flux状态管理库

    在React的生态系统中,Flux是一种广泛采用的状态管理架构,它提倡单向数据流和中心化的数据存储。然而,随着React社区的发展,出现了许多类似Flux的替代库,旨在简化和优化状态管理。本篇文章将深入探讨React中的一...

    Flux

    "Flux"是一个在设计和开发领域中广泛使用的术语,特别是在UI(用户界面)和UX(用户体验...结合字体相关的标签,我们可以理解为Flux架构不仅处理应用程序的逻辑,还与UI设计中的视觉元素,如字体选择和样式,紧密关联。

    flux-cart-example:一个使用React Flux Architecture构建的简单购物车示例应用程序

    总之,`flux-cart-example`提供了一个实践Flux架构的起点,帮助开发者更好地理解和应用这一模式,从而在实际的React项目中构建更健壮、可维护的状态管理解决方案。虽然示例可能已过时,但它仍然能够揭示Flux的核心...

    react-旨在重构一个react事例

    综上所述,"react-旨在重构一个react事例"的项目涵盖了React组件化开发、Flux架构的应用以及代码重构的实践。通过对这个项目的学习,你可以深入理解React和状态管理,并了解如何通过重构提升代码质量和应用程序的...

    React全栈++Redux+Flux+webpack+Babel.rar

    3. **Flux**:Flux是Facebook提出的一种前端架构模式,用于解决大型React应用中的数据流管理问题。它提倡单向数据流,即数据从服务器到Store,再由Store更新视图。Action是触发数据变化的事件,Dispatcher是协调数据...

    React和Flux的组件定制化实践.pdf

    在Flux架构中,这些行为会触发Action,然后由对应的Handler处理,进一步更新组件状态。文档指出了通过组合不同的Action和Handler来实现组件交互复杂性的管理,最终实现对组件行为的定制化。 文档还提出,为了有效地...

    react-planning-poker:在 React Flux 中实现的基本规划扑克应用程序

    **React Planning Poker 应用程序概述** `react-planning-poker` 是一个基于 React 和 Flux 架构开发的工具,用于进行敏捷...通过学习这个应用,开发者可以深入理解 React 和 Flux 架构,以及它们在实际项目中的应用。

    前端项目-flux.zip

    总结来说,这个名为"flux-master"的压缩包很可能是Flux架构的一个实现示例,包含了一个前端项目的所有组成部分,包括Actions、Stores、Dispatcher以及React组件等,供开发者学习和参考如何构建基于Flux的React应用。

    ReactFluxBootstrap:React Flux Bootstrap实施

    ReactFluxBootstrap是一个基于ReactJS、Flux架构和Bootstrap UI框架构建的开发平台,它将这三者的优势结合在一起,为开发高效、响应式的Web应用提供了便利。在ReactFluxBootstrap项目中,我们可以深入理解以下几个...

    RR:RR-React堆。 Flux架构的超小但纯粹的React性实现

    标题中的"RR:RR-React堆"是一个名为"RR-React堆"的项目,它针对的是React技术栈,特别是关于Flux架构的实现。Flux是一种由Facebook提出的用于管理React应用状态的架构模式,强调单向数据流和中心化的数据存储。而"RR...

Global site tag (gtag.js) - Google Analytics