《React-Native系列》20、 RN数据流之Flux概览

今天我们来看下ReactNative的数据流框架Flux。

Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。相比于形式化的框架它更像是一个架构思想，不需要太多新的代码你就可以马上使用Flux构建你的应用。

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

一个 Flux 应用主要包含四个部分：
dispatcher
处理动作分发，维护 Store 之间的依赖关系

stores
数据和逻辑部分

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

actions
提供给 dispatcher 传递数据给 store

在Flux应用中数据是单向流动的：

单向的数据流是Flux应用的核心特性，上图应该成为Flux程序员的主要心智模型。Dispatcher，stores和views是拥有清晰的输入输出的独立节点。而actions是包含了新的数据和身份属性的简单对象。

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


整个流程如下：
首先要有 action，通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher
View 层通过用户交互（比如 onClick）会触发 Action
Dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数
Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了
View 会监听这个 change 事件，拿到对应的新数据并调用 setState 更新组件 UI

所有的状态都由 Store 来维护，通过 Action 传递数据，构成了如上所述的单向数据流循环，所以应用中的各部分分工就相当明确，高度解耦了。这种单向数据流使得整个系统都是透明可预测的。

下篇文章，我们结合Demo来分析下Flux。

参考：https://hulufei.gitbooks.io/react-tutorial/content/flux.html

           http://reactjs.cn/react/docs/flux-overview.html