Reflux 101
一点背景 React在设计之初就只关注在View本身上，其余部分如数据的获取，事件处理等，全然不在考虑之内。不过构建大型的Web前端应用，这些点又实在不可避免。所以Facebook的工程师提出了前端的Flux架构，这个架构的最大特点是单向数据流（后面详述）。但是Flux本身的实现有很多不合理的地方，比如单例的Dispatcher会在系统中有多种事件时导致臃肿的switch-cases等。 这里是Facebook官方提供的提供Flux的结构图。 其实整个Flux背后的思想也不是什么新东西。在很久之前，Win32的消息机制（以及很多的GUI系统）就在使用这个模型，而且这也是一种被证实可以用来构建大型软件的模型。 鉴于Flux本身只是一个架构，而且Facebook提供的参考实现又有一些问题，所以社区有了很多版本的Flux实现。比如我们这里会用到的Reflux。 Reflux简介 简而言之，Reflux里有两个组件：Store和Action。Store负责和数据相关的内容：从服务器上获取数据，并更新与其绑定的React组件（view controller）;Action是一个事件的集合。Action和Store通过convention来连接起来。 具体来说，一个典型的过程是： 用户的动作(或者定时器)在组件上触发一个Action Reflux会调用对应的Store上的callback（自动触发） 这个callback在执行结束之后，会显式的触发（trigger）一个数据 对应的组件（可能是多个）的state会被更新 React组件检测到state的变化后，会自动重绘自身 一个例子 我们这里将使用React/Reflux开发一个实际的例子，从最简单的功能开始，逐步将其构建为一个较为复杂的应用。 这个应用是一个书签展示应用（数据来源于我的Google Bookmarks）。第一个版本的界面是这样的： 要构建这样一个列表应用，我们需要这样几个部分： 一个用来fetch数据，存储数据的store （BookmarkStore） 一个用来表达事件的Action（BookmarkActions） 一个列表组件（BookmarkList） 一个组件条目组件（Bookmark） 定义Actions var Reflux = require('reflux'); var BookmarkActions = Reflux.createActions([ 'fetch' ]); module.exports = BookmarkActions; 第一个版本，我们只需要定义一个fetch事件即可。然后在Store中编写这个Action的回调： 定义Store var $ = require('jquery'); var Reflux = require('reflux'); var BookmarkActions = require('../actions/bookmark-actions'); var Utils = require('../utils/fetch-client'); var BookmarkStore = Reflux.createStore({ listenables: [BookmarkActions], init: function() { this.onFetch(); }, onFetch: function() { var self = this; Utils....