Flux从提出到现在先先后后看了好多次，看官方demo的时候感觉有些理解，过后又说不出个一二，所以今天抽空从项目目录结构的创建都自己来实现一遍，感觉对Flux的理解比前面看的时候要好。
Flux: 单向数据流，View(Component)交互触发Action，Action通过Dispatcher发布事件，Store响应Dispatcher发布的事件，更新数据，发出Change事件，View响应change事件，更新View。View不应该通过Store直接操作数据。
来自flux官网的经典图片
Flux只是一种模式，不是随拿随用的框架，因此这些需要自己实现。
我在学习时写的是一个简单的评论列表样例，用户可以在输入框中写评论，点击评论提交，然后实时渲染到评论列表中。
目录结构
Paste_Image.png
用户与View交互产生Action
Paste_Image.png
（这里也可以直接引用Store进而操作数据，不过就造成了View和Store的直接交互。）
Action调用Dispatcher.dispatch()发布事件
Action是一个全部交互个改变的入口，需要自己注册Action用于后续调用，一个Action由actionType和payload组成
Paste_Image.png
Dispatcher发布事件
Dispatcher将Action和Store联系在一起，Action中通过Dispatcher.dispatch({actionType, payload})来分发事件，Store中通过Dispatcher.register(function(action))来响应其注册的Action。
Dispatcher发布事件
Store响应注册事件
Store对响应的数据做出改变，需要通知View数据已经变化并进行更新。
Store告诉View数据更新了
但是Store本身并没有发布/接收事件的功能，因此要借助其他模块的方法。这里使用Node的events的EventEmitter，以及object-assign来实现对象间的继承。
对Store进行扩展，使其具有注册/发送事件的能力
Paste_Image.png
这样一来，整个组件就已经运作起来了:
- 用户输入信息后点击提交按钮，�Action.create(); --View层
- Action中对应的action方法被触发，发布事件Dispatcher.dispatch('create', payload); --Action层
- Dispatcher发布create事件。 --Dispatcher层
- 注册了对应Dispatcher的Store接收create事件，更新数据。更新完毕后，发布change事件。 --Store层
- 注册了相应Store注册事件的View相应change事件，更新视图。 --View层
一次单向数据流循环结束。
总结:
对于flux这个概念性的东西，果然还是动手做了才对其有所体会啊~~其实是我脑子笨，理解力不行~~！React v0.14.0也有了一些变化，同时也体验了一下webpack打包文件的强大功能，页面引入一个bundle.js就够了。
因为创建项目时命名上有些不一致，所以看起来可能有点乱乱的感觉→_→，作为一次学习总结，虽然写得烂，万一能帮到其他人呢，所以就发出来了~ ：）
网友评论