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中获取数据,同时将这些数据传递给它的后代节点。
参考资料
react及flux架构范例Todomvc分析的更多相关文章
- 使用 React 和 Flux 创建一个记事本应用
React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...
- 探索从 MVC 到 MVVM + Flux 架构模式的转变
本文首发于 my blog 在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用,本文会通过一个小 demo 来讲述为什么会引人数据状态库. 从 MVC 到 MV ...
- [React] 07 - Flux: uni-flow for react
相关资源 Ref: [Android Module] 03 - Software Design and Architecture Ref: Flux 架构入门教程 Ref: 详解React Flux架 ...
- 【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...
- 理解Flux架构
本文摘自<Flux架构入门教程>和<谈一谈我对 React Flux 架构的理解>.也有自己的观点和总结.转载请注明出处. 一.Flux架构描述 1. Flux是什么 Flux ...
- Flux架构与Redux简介
Flux架构区别于传统的MVC架构 在facebook实践中, 当用户接收到新消息时,右上角会弹出你有一条新消息, 右下角的对话框也会提示有新消息, 如果用户在对话框中查看了新消息,那么右上角的这个新 ...
- Azure底层架构的初步分析
之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...
- 前后端分离框架前端react,后端springboot跨域问题分析
前后端分离框架前端react,后端springboot跨域问题分析 为啥跨域了 前端react的设置 springboot后端设置 为啥跨域了 由于前后端不在一个端口上,也是属于跨域问题的一种,所以必 ...
- .Net微服务架构之运行日志分析系统
一.引言 .Net技术栈目前还没有像spring cloud相对完整一整微服务架构栈,随着业务发展系统架构演进,自行构建.Net技术体系的微服务架构,配套相关核心组件.因平台基于微服务架构方式研发,每 ...
随机推荐
- 需要了解的几个Java基础点
关键字 native:表示要调用非Java语言写函数,比如用C语言使用JNI实现的接口.比如windows环境的dll文件.举例:Object.hashcode() 位运算 << n:左移 ...
- Linux字符设备简单示例
1. Linux字符设备是一种按字节来访问的设备,字符驱动则负责驱动字符设备,这样的驱动通常实现open.close.read和write系统调用.例如:串口.Led.按键等. 2. 通过字符设备文件 ...
- ZPL打印机公用代码
using System;using System.Collections.Generic;using System.Linq;using System.Web; using System.Text; ...
- 问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决)
问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...
- scp —— 服务器之间互传文件
scp 可以在 2个 linux 主机间复制文件: 从 本地 复制到 远程 * 复制文件: 举例子: scp /home/space/music/.mp3 root@192.168.0.1 ...
- my.资料__烹饪炼药
ZC: 新区的时候,烹饪炼药 也不是 等级越高越好:等级越高需要的人可能少,价格高 但是买的人少:大家都在那个等级 很容易堵车 没有摊位... 刚开始 大家都穷 可能等级稍低的 反而好卖... ZC: ...
- Troubleshooting ORA-201 and ORA-202 Error
---- 3. When lowering the value of COMPATIBLE: You cannot start the database with lower compatibilit ...
- chrome浏览器解决 跨域调试问题
1.关闭chrome浏览器(全部) 我们可以通过使用chrome命令行启动参数来改变chrome浏览器的设置,具体的启动参数说明参考这篇介绍.https://code.google.com/p/xia ...
- Mybatis学习笔记6 - #{}和${}
#{}:可以获取map中的值或者pojo对象属性的值.${}:可以获取map中的值或者pojo对象属性的值. 区别: #{}:是以预编译的形式,将参数设置到sql语句中:PreparedStateme ...
- oracle impdp时卡死Processing object type SCHEMA_EXPORT/TABLE/INDEX/INDEX
今天在用impdp导入时,Processing object type SCHEMA_EXPORT/TABLE/INDEX/INDEX卡在建索引的过程一直不动,也不报错,重试了好几遍还是这样. 后来恍 ...