你的位置:首页 > 软件开发 > Java > react及flux架构范例Todomvc分析

react及flux架构范例Todomvc分析

发布时间:2015-05-30 12:00:19
react及flux架构范例Todomvc分析通过分析flux-todomvc源码,学习如何通过react构建web程序,了解编写react应用程序的一般步骤,同时掌握Flux的单向数据流动架构思想关于reactreact一个最吸引我的特性是组件,它是模块化的,所有的组件是独立的 ...

 

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组件,并设置了onSavevalue的prop,非编辑状态下,显示切换是否完成的按钮,绑定了onChange事件,显示项目文字内容,绑定了onDoubleClick事件,显示删除按钮,绑定了onClick事件;

  • 添加切换是否完成的回调方法_onToggleComplete,在调用时,执行相应Action方法toggleComplete

  • 添加双击文字时的回调方法_onDoubleClick,在调用时,通过setState设置当前项目为编辑状态;

  • 添加触发保存时的回调方法_onSave,在调用时,执行相应Action方法updateText,并通过设置setState退出编辑状态;

  • 添加删除时的回调方法_onDestroyClick,在调用时,执行相应Action方法destroy

TodoTextInput组件

  • 基础的prop验证

    • 要求classNameidplaceholdervalue为字符串;
    • 存在onSave方法
  • getInitialStates中设置初始值;

  • render中返回输入文本框,绑定多个事件onBluronChangeonKeyDown

  • 添加失去焦点时的回调方法_save,在调用时,执行父级元素提供的onSave方法,并调用setState清空文字;

  • 添加内容变化时的回调方法_onChange,在调用时,调用setState更新虚拟DOM并刷新DOM元素;

  • 添加按下键盘时的回调方法onKeyDown,在调用时,检测是否按下回车键以执行onSave方法;

TodoTextInput组件仅依赖于父级通过prop传递下来的数据与方法,不直接与ActionStore进行操作

TodoActions

  • 对外提供完成具体功能的action方法,内部会调用事件分发器AppDispatcher发出一个具体的action(携带数据payload),并设置payloadactionType为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为例,分两个阶段完成该应用程序的设计。

初始化阶段:

  1. 构建顶级组件及子组件;
  2. 获取Stroe数据,逐级提供到子组件上;
  3. Store绑定change事件,发生变化时,更新组件的数据;
  4. 子组件绑定各类事件,响应用户操作;
  5. 事件分发器注册一个接收到action时的事件处理回调函数;

交互阶段(以新增一个todo项为例):

  1. 在子组件上触发DOM事件,执行回调函数;
  2. 回调函数中调用Action方法;
  3. Action调用事件分发器,发出一个action;
  4. action中的数据被事件分发器传递给初始化阶段注册的事件处理回调函数;
  5. 事件处理回调函数根据不同的actionType进行处理;
  6. 如在处理中涉及数据变化,则手动触发初始化阶段Store绑定的change事件;
  7. Store接收到事件后,重新检索出所有数据提供给顶级组件的setState方法;
  8. 顶级组件自动调用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中获取数据,同时将这些数据传递给它的后代节点。


参考资料

  • flux-todomvc
  • flux
  • refluxjs
  • flux-overview

Fork Me On Github


原标题:react及flux架构范例Todomvc分析

关键词:架构

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。