Flux学习笔记

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由actionTypepayload组成

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的eventsEventEmitter,以及object-assign来实现对象间的继承。

对Store进行扩展,使其具有注册/发送事件的能力
Paste_Image.png

这样一来,整个组件就已经运作起来了:

  1. 用户输入信息后点击提交按钮,�Action.create(); --View层
  2. Action中对应的action方法被触发,发布事件Dispatcher.dispatch('create', payload); --Action层
  3. Dispatcher发布create事件。 --Dispatcher层
  4. 注册了对应Dispatcher的Store接收create事件,更新数据。更新完毕后,发布change事件。 --Store层
  5. 注册了相应Store注册事件的View相应change事件,更新视图。 --View层

一次单向数据流循环结束。

总结:

对于flux这个概念性的东西,果然还是动手做了才对其有所体会啊~~其实是我脑子笨,理解力不行~~!React v0.14.0也有了一些变化,同时也体验了一下webpack打包文件的强大功能,页面引入一个bundle.js就够了。
因为创建项目时命名上有些不一致,所以看起来可能有点乱乱的感觉→_→,作为一次学习总结,虽然写得烂,万一能帮到其他人呢,所以就发出来了~ :)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • ##Flux与面向组件化开发首先要明确的是,Flux并不是一个前端框架,而是前端的一个设计模式,其把前端的一个交互...
    吴小蛆阅读 306评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,409评论 25 707
  • 去年翻译的flux官方文档对flux架构的描述,觉得最近很多朋友开始react编程了,所以我觉得有必要拿出来这篇水...
    余歌_非鱼阅读 2,509评论 0 9
  • -------太阳从窗帘的缝隙中穿透进来,因为你喜欢镂空的各种图案的窗帘风格,喜欢每天的阳光照在身上呈现不同的样子...
    张济贤阅读 175评论 0 1
  • Ariel的世界阅读 105评论 0 0