(精)组件与数据流
参考自这个文章：
https://zhuanlan.zhihu.com/p/26426054
该文章利用公式的方式解释程序设计，很独特。
这个文章值得我反复阅读思考。
名词概念
Reactive理念
reduce & reducer
单向数据流
数据管道
天然支持数据单向流动。
RxJS或者xstream，这些库，因为拥有下面这些特性，很适合做数据流控制：
- 对事件的高度抽象
- 同步和异步的统一化处理
- 数据变更的持续订阅（订阅模式）
- 数据的连续变更（管道拼接）
- 数据变更的的组合运算（管道组合）
- 懒执行（无订阅者，则不执行）
- 缓存的中间结果
- 可重放的历史记录
……等等
MDV(MOdel-Driven-View)架构
1 | |
这个表达式的含义是：在初始状态上，依次叠加后续的变更，所得的就是当前状态。这就是当前最流行的数据流方案Redux的核心理念。
从整体来说，使用Redux，相当于把整个应用都实现为命令模式，一切变动都由命令驱动。
MVI(Model View Intent)架构
1 | |
- Intent，负责从外部的输入中，提取出所需信息(翻译为意图？)
- Model，负责从Intent生成视图展示所需的数据
- View，负责根据视图数据渲染视图
一个组件其实是：数据模型、动作、视图三者的集合，这么一个MVI组件相当于React-Redux体系中，connect了store之后的高阶组件。
- 视图隔离，纯化为展示组件
- 内部状态的定义清晰化
- 描述出内部状态的来源关系：state := actions.reduce(reducer, initState)
- 将内部的动作以action的方式输出到上面那个表达式关系中
与Redux相比，这套机制的特点是：
- 不需要显式定义整个应用的state结构
- 全局状态和本地状态可以良好地统一起来
- 可以存在非显式的action，并且action可以不集中解析，而是分散执行
- 可以存在非显式的reducer，它附着在数据管道的运算中
- 异步操作先映射为数据，然后通过单向联动关系组合计算出视图状态
connect高阶函数
分形
https://en.wikipedia.org/wiki/Fractal
一种设计，如果支持分形似乎天然就意味着无限的可扩展性 - 因为分形的API天然就是可扩展的。
前端数据库
高阶处理
component local state
组件的数据和逻辑管理
| 刀锋女王带领的虫群部队 | 人类军 |
|---|---|
| 纯展示 | 带逻辑 |
| 贫血组件 | 充血组件 |
| 一切状态外置，组件不管理自己状态 | 部分内置，由组件自己管理，另外一些由全局Store管理 |
| 单个蚂蚁的智能程度很低，但它可以接受蚁王的指令去做某些事情，所有的麻烦事情都集中在上层，决策层的事务非常繁琐。 | 每个人都有自己的思考和执行能力，一个管理有序的体系中，管理者只需决定他和自己直接下属所需要做的事情就可以了。 |
结论
- 从原始数据到视图数据的处理过程不应当放在reducer或mutation中，那很显然就应当放在视图组件的内部去做。
- store里面存放的是扁平化的原始数据(可以借助normalizr库做扁平化)
资料
Vue和React的设计参考-Cycle.js：
https://github.com/cyclejs/cyclejs
ReactiveX：
RxJS：
https://github.com/reactivex/rxjs
Vue+Rx的集成方式：
https://github.com/vuejs/vue-rx/
概念扫盲：