单项数据流与Flux
首先,单项数据流是一种思想,一种约束,一种标准.在使用React时,推荐使用单项的数据流更好.
有点如下:
- 视图组件变得很薄，只包含了渲染逻辑和触发 action 这两个职责，即所谓 “dumb components”。
- 要理解一个 store 可能发生的状态变化，只需要看它所注册的 actions 回调就可以。
- 任何状态的变化都必须通过 action 触发，而 action 又必须通过 dispatcher 走，所以整个应用的每一次状态变化都会从同一个地方流过。 其实 Flux 和传统 MVC 最不一样的就在这里了。 React 在宣传的时候一直强调的一点就是 “理解你的应用的状态变化是很困难的 (managing state changing over time is hard)”， Flux 的意义就在于强制让所有的状态变化都必须留下一笔记录，这样就可以利用这个来做各种 debug 工具、历史回滚等等。
这是一种思想，目前有一些类库基于这种思想对应提供了一些实践，如flux、reflux、redux等。 你按照这些类库的规范来写就可以达到单项数据流的标准.
KFlux
在观摩了很多实现之后,自己也捉摸着想要实现一套相关的类库.
我自己实现了一套Flux写法的Redux思想的单项数据流.KFlux项目地址(目前正在完善当中)
首先接触过的同学都知道,Flux的学习成本很低,很快你就能读完源码,而且用法规范也非常易懂,易做.Redux的学习成本相对较高很多.
但是Redux有很多优秀的功能也是可以和Flux相结合的.
一次单项数据流的旅程
demo在KFlux项目地址里(其实还是没有写,后面会跟进补充);
下面是文字描述了数据流过程.后续还需要补充代码
Component 中绑定 store 的事件，在 store 发生改变的时候通知 Component
Dispatcher 得到一个 Flux 实例，在 Flux 中注册一个回调，作用这个后面会对Flux进行源码分析
一次单向数据流的流动
Component 由用户动作触发的，或者是自动请求之类的发起一次数据更行，Component相应的方法会调用Action注册的相应的方法，
Action 调用 dispatch 发出一个 payload 对象，一般包含两个键值，一个用于标识事件的名称。一个是要传输的数据。
Dispatcher的实例注册的函数会被触发，并且传入 payload 对象。
根据传入的事件名称，判断触发对应的 store 触发相应的数据进行改变。
store 通知 Component 发生改变。并提供获取所有参数的方法。
Component 触发 this.setState 方法，this.setState 触发render
render 对传入数据生成一个虚拟DOM，与 View 做 diff，将不同的地方更新到 View上。至此，一个完整的数据流完成了