React Flux浅析

发布时间：2023-04-10 14:12:50 所属栏目：教程来源：

导读：React 标榜自己是 MVC 里面 V 的部分，那么 Flux 就相当于添加 M 和 C 的部分。

Flux 是 Facebook 使用的一套前端应用的架构模式。

一个 Flux 应用主要包含四个部分：

the dispatcher

处理动作分发，维护

React 标榜自己是 MVC 里面 V 的部分，那么 Flux 就相当于添加 M 和 C 的部分。

Flux 是 Facebook 使用的一套前端应用的架构模式。

一个 Flux 应用主要包含四个部分：

the dispatcher

处理动作分发，维护 Store 之间的依赖关系

the stores

数据和逻辑部分

the views

React 组件，这一层可以看作 controller-views，作为视图同时响应用户交互

the actions

提供给 dispatcher 传递数据给 store

针对上面提到的 Flux 这些概念，需要写一个简单的类库来实现衔接这些功能，市面上有很多种实现，这里讨论 Facebook 官方的一个实现 Dispatcher.js

单向数据流
先来了解一下 Flux 的核心“单向数据流“怎么运作的：

Action -> dispatcher -> Store -> View
更多时候 View 会通过用户交互触发 Action，所以一个简单完整的数据流类似这样：

React Flux

整个流程如下：

首先要有 action，通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher

View 层通过用户交互（比如 onClick）会触发 Action

dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数

Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了

View 会监听这个 change 事件，拿到对应的新数据并调用 setState 更新组件 UI

所有的状态都由 Store 来维护，通过 Action 传递数据，构成了如上所述的单向数据流循环，所以应用中的各部分分工就相当明确，高度解耦了。

这种单向数据流使得整个系统都是透明可预测的。

dispatcher
一个应用只需要一个 dispatcher 作为分发中心，管理所有数据流向，分发动作给 Store，没有太多其他的逻辑（一些 action creator 方法也可以放到这里）。

dispatcher 分发动作给 Store 注册的回调函数，这和一般的订阅/发布模式不同的地方在于：

回调函数不是订阅到某一个特定的事件/频道，每个动作会分发给所有注册的回调函数

回调函数可以指定在其他回调之后调用

基于 Flux 的架构思路，Dispatcher.js 提供的 API 很简单：

register(function callback): string 注册回调函数，返回一个 token 供在 waitFor() 使用

unregister(string id): void 通过 token 移除回调

waitFor(array ids): void 在指定的回调函数执行之后才执行当前回调。这个方法只能在分发动作的回调函数中使用

dispatch(object payload): void 分发动作 payload 给所有注册回调

isdispatching(): boolean 返回 dispatcher 当前是否处在分发的状态

dispatcher 只是一个粘合剂，剩余的 Store、View、Action 就需要按具体需求去实现了。

接下来结合 flux-todomvc 这个简单的例子，提取其中的关键部分，看一下实际应用中如何衔接 Flux 整个流程，希望能对 Flux 各个部分有更直观深入的理解。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!