react及flux架构范例Todomvc分析
react及flux架构范例Todomvc分析
通过分析flux-todomvc源码，学习如何通过react构建web程序，了解编写react应用程序的一般步骤，同时掌握Flux的单向数据流动架构思想
关于react
react一个最吸引我的特性是组件，它是模块化的，所有的组件是独立的，又可以通过嵌套来构建更大型的组件，一个个小组件经过层层组装，最终形成web应用程序，它让我开始重新思考如何去构建大型的web应用程序。
关于Flux
Flux是一个思想而非框架，强调数据自上而下传递的单向流动理念，已经有很多种实现，比较有名气的是RefluxJs。单向流动让数据走向更清晰：用户UI交互触发事件，事件回调执行Action，并将所有的变化数据作为参数payload传递进去，各种Stores从payload中取出自己所需的数据进行更新，最终重新渲染发生变化的DOM结点。
分析
以下简要分析 react + flux 实现的todomvc源码，主要研究其构建方式与单向数据流动思想，对具体代码编写不做深入分析。
TodoApp组件
- 在
getInitialStates中设置初始值； - 在
componentDidMount中添加store监听指定事件_onChange； - 在
componentWillUnmount中清除store监听的事件及回调； - 在
render中将state赋值给各个component的prop，子组件包含Header组件、MainSection组件、Footer组件； - 添加
_onChange事件回调方法，触发该回调时，执行setState，更新UI。
Store只在顶级的组件中接入，子组件通过prop层层传递，所有子组件不直接从Store里检索数据，这是一种很好的设计方式，有助降低数据耦合度。
Header组件
- 在
render中包含TodoTextInput组件，并将自身的_onSave方法作为TodoTextInput组件的prop； - 添加
_onSave方法，在调用时，执行相应Action方法create。
Header组件统一管理_onSave方法，该方法将提供给子组件调用。
MainSection组件
-
基础的prop验证
- 要求必须提供对象集合
- 要求提供是否全部完成的布尔值；
-
在
render中分类处理，数据为空时，返回null，隐藏元素，有数据时，显示列表内容，包含TodoItem组件，同时提供一个checkbox控件用于设置是否全部完成； -
添加切换设置全部完成的回调方法
_onToggleCompleteAll，在调用时，执行相应Action方法toggleCompleteAll。
Footer组件
-
基础的prop验证
- 要求必须提供对象集合；
-
在
render中计算未完成项目数量，并根据是否存在已完成项来显示清除全部完成项按钮，按钮绑定onClick事件； -
添加清除全部完成项的回调方法
_onClearCompletedClick，在调用时，执行相应Action方法destroyCompleted。
TodoItem组件
-
基础的prop验证
- 要求项目不可空；
-
在
getInitialStates中设置初始值； -
在
render中根据是否处于编辑状态，显示不同的元素，编辑状态下，包含了TodoTextInput组件，并设置了onSave和value的prop，非编辑状态下，显示切换是否完成的按钮，绑定了onChange事件，显示项目文字内容，绑定了onDoubleClick事件，显示删除按钮，绑定了onClick事件； -
添加切换是否完成的回调方法
_onToggleComplete，在调用时，执行相应Action方法toggleComplete； -
添加双击文字时的回调方法
_onDoubleClick，在调用时，通过setState设置当前项目为编辑状态； -
添加触发保存时的回调方法
_onSave，在调用时，执行相应Action方法updateText，并通过设置setState退出编辑状态； -
添加删除时的回调方法
_onDestroyClick，在调用时，执行相应Action方法destroy；
TodoTextInput组件
-
基础的prop验证
- 要求
className、id、placeholder、value为字符串； - 存在
onSave方法
- 要求
-
在
getInitialStates中设置初始值； -
在
render中返回输入文本框，绑定多个事件onBlur、onChange、onKeyDown； -
添加失去焦点时的回调方法
_save，在调用时，执行父级元素提供的onSave方法，并调用setState清空文字； -
添加内容变化时的回调方法
_onChange，在调用时，调用setState更新虚拟DOM并刷新DOM元素； -
添加按下键盘时的回调方法
onKeyDown，在调用时，检测是否按下回车键以执行onSave方法；
TodoTextInput组件仅依赖于父级通过prop传递下来的数据与方法，不直接与Action、Store进行操作
TodoActions
- 对外提供完成具体功能的action方法，内部会调用事件分发器
AppDispatcher发出一个具体的action（携带数据payload），并设置payload的actionType为action对应的类型。
AppDispatcher
- 注册一个集中的Action管理回调方法
- 分发actions（在
TodoActions中的具体方法中触发）。
AppDispatcher既分发actions，又是actions的接收者，在接到actions后负责调用先前注册的Action管理回调方法。
Action管理回调方法中根据actionType来完成不同的操作，并在操作结束时触发TodoStore绑定的事件。
TodoStore
- 提供对所有数据进行增删改查的方法
- 注册事件回调函数，在数据发生改变后，手动触发该事件。
总结
react组件通过用户UI交互触发event，event回调函数被执行，在这些函数中调用Action对象对应的方法，发出action，事件分发器接收到action后，做出相应处理，然后触发Store改变事件，通过setState重新渲染DOM元素。
以TodoMVC为例，分两个阶段完成该应用程序的设计。
初始化阶段：
- 构建顶级组件及子组件；
- 获取Stroe数据，逐级提供到子组件上；
- Store绑定
change事件，发生变化时，更新组件的数据； - 子组件绑定各类事件，响应用户操作；
- 事件分发器注册一个接收到action时的事件处理回调函数；
交互阶段（以新增一个todo项为例）：
- 在子组件上触发DOM事件，执行回调函数；
- 回调函数中调用Action方法；
- Action调用事件分发器，发出一个action；
- action中的数据被事件分发器传递给初始化阶段注册的事件处理回调函数；
- 事件处理回调函数根据不同的
actionType进行处理； - 如在处理中涉及数据变化，则手动触发初始化阶段Store绑定的
change事件； - Store接收到事件后，重新检索出所有数据提供给顶级组件的setState方法；
- 顶级组件自动调用render方法，重新渲染UI界面。
交互阶段的数据环
Event --> Action --> Dispatcher（携带数据） --> Store --> View --> Event
Flux主要包括三部分：Dispatcher、Store和Views（React组件），与传统的MVC(model-View-Controller)不同。Flux中的Dispatcher以controller-view的形式存在，所有数据操作都在Dispatcher的回调中进行，并反映到View上。view通常处于应用的顶层，它从Stores中获取数据，同时将这些数据传递给它的后代节点。