React.js专题站程序员@IT·互联网

Flux学习笔记

2015-10-21  本文已影响535人  AAArrt

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就够了。
因为创建项目时命名上有些不一致,所以看起来可能有点乱乱的感觉→_→,作为一次学习总结,虽然写得烂,万一能帮到其他人呢,所以就发出来了~ :)

上一篇下一篇

猜你喜欢

热点阅读