翻译自github上的reflux项目,链接:https://github.com/reflux/refluxjs

〇、安装及引入

安装:

npm install reflux

引入:

var Reflux = require("reflux");//CommonJS风格

import Reflux from "reflux";//ES6风格

一、Overview概览

The main function of Reflux is to introduce a more functional programming style architecture by eschewing MVC like pattern and adopting a single data flow pattern.

Reflux的主要功能是引入一个函数式编程风格架构,采用单向数据流模式,而非MVC类似的模式。

这个模式由actions和data stores组成。当actions引入新数据时,要经过data stores之后再由view 组件展示。如果组件有事件要更改data stores,也需要经过相应的actions再传递到stores。

二、用法

要用reflux,我们需要创建可以被React Component唤起的actions;负责存储、更新数据的stores,stores会监听actions;同样的,stores会与React Component挂钩,当store里state更新时,也更新React Component中的state。因此,有3个概念如下:

1、创建actions

2、创建stores

3、创建 stores与React Component的联系(钩子)

三、创建actions

var statusAction = Reflux.createAction();//可选的参数对象

一个action是函数,可以像任何其他函数一样被调用,如:statusUpdate(data)

也有一个创建多个action的函数

var Actions = Reflux.createActions([
"statusUpdate",
"statusEdited",
"statusAdded"
]);

Actions对象现在包含多个actions,它们被调用的方式与上面一样

Actions.statusUpdate();

关于Actions更多的内容:

  • 用子actions异步加载文件
  • 做preEmit和shouldEmit检查
  • 快捷方法

四、创建Stores

创建data store很像ReactJS的React.Component,就是创建一个继承自Reflux.Store的类。

像component一样,store也有一个state属性,并且setState用法也一样。你可以在constructor中创建所有的action listeners,并且用store自己的listenTo函数注册他们

class StatusStore extends Reflux.Store{
constructor(){
super();
this.state = {//设置store的默认值和在react里面一样
flag: 'OFFLINE'
};
this.listenTo(statusUpdate, this.onStatusUpdate)//监听statusUpdate action
}
onStatusUpdate(status){
var newFlag = status ? 'ONLINE': 'OFFLINE';
this.setState({flag: newFlag});
} }

在上面的例子中,无论何时statusUpdate被调用,store里面的onStatusUpdate回调函数就会被调用,参数就是传入action的参数。比如,action如果这样调用的:statusUpdate(true),那么onStatusUpdatestatus被调用时的参数就是true。

store也可以方便的注册actions集,比如this.listenables。 如果一个 action 对象(或者包含多个actions对象的数组)这样用的话,会自动的以名字注册回调函数。如on+驼峰,onActionName

var Actions = Reflux.createActions(['firstAction', 'secondAction']);

class StatusStore extends Reflux.Store{
constructor(){
super();
this.listenables = Actions;
}
onFirstAction(){
//
}
onSecondAction(){
//
}
}

Reflux Stores非常强大,甚至可以做到创建可以被局部读取和设置的全局的state,或者 full-state time-travel, debugging, etc.(什么意思。。。。)

五、Hooking Stores to Components

创建了actions和stores之后,现在最后一步就是Hooking Stores to Components。

非常简单,extends React.Component 换成extends Reflux.Component,再设置上stores,就可以了。

Reflux.Component是继承自React.Component的,所以你可以放心使用。

两者唯一不同就是Reflux.Component允许你设置store,以便从store中获取state

class MyComponent extends Reflux.Component{
constructor(props){
super(props);
this.state = {};//store会将它的state加到组件的state里面去
this.store = StatusStore;//assign这个store 类就可以了
}
render(){
var flag = this.state.flag;
return <div>User is {flag}</div>
}
}

当组件mount的时候,要么会创建StatusStore的一个单例实例(如果还未存在),要么会用一个已经存在的单例实例(如果已经被别的使用这个store的组件创建了)

注意,你可以:

1、可以将this.stores 赋值为包含一系列store类的数组

2、设置this.storeKeys(数组)来限制只有store的一部分state被混入到组件里

还有一个mapStoreToState方法用于完全控制store里的state到component 的对应关系

class MyComponent extends Reflux.Component{
constructor(props){
super(props);
this.state = {type: 'admin'};
this.stores = [StatusStore, AnotherStore];
this.storeKeys = ['flag', 'info'];
}
render(){
var flag = this.state.flag;
var info = this.state.info;
var type = this.state.type;
return (
<div>User is {flag}, info: {info}, type: {type}</div>
)
}
}

上面组件会将StatusStore 和 AnotherStore的state都加进去,但是,由于this.storeKeys的限制,它只会把flag和info这两个state加进去state,其他的不会。即使一个store中含有一个type 的state,也不会加进来。我们组件state里的type是安全的。

更多:

Reflux这种直接的将store集成到组件里的方式又简单,又强大。你可以将stores集合起来,筛选那些state需要哪些不需要,甚至可以详细的规定store里的state如何对应到某个组件里的state

六、文档

以上只是对Reflux的大体的介绍,九牛一毛,如果你想深入了解,请看官方文档。

我尽量的多翻译点(*^__^*)

Reflux中文教程——概览的更多相关文章

  1. Sublime Text最好的中文教程

    原文链接:http://lucida.me/blog/sublime-text-complete-guide/ 摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的 ...

  2. director.js:客户端的路由---简明中文教程

    1.引子 最近学用director.js,那是相当的简单易学易使用.不过开始学的时候,搜搜过后,却没有发现相关的中文教程.于是决定硬啃E文,翻译备用的同时也当是给自己上课并加深对它的理解. direc ...

  3. Groovy中文教程(链接收藏)

    学习Gradle前,需要有一个Groovy语言的基础,以免被Groovy的语法困扰,反而忽略了Gradle的知识.这里有一个Groovy的简明中文教程文档,可以快速学习Groovy的一些语法:http ...

  4. webstorm的中文教程和技巧分享

    webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享.webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu.c ...

  5. 读w3c中文教程对键盘事件解释的感想 -遁地龙卷风

    写这篇博文源于w3c中文教程对键盘事件的解释, onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松开 可在实践中发现 只注册key ...

  6. wxPython中文教程入门实例

    这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下     wxPython中文教程入门实例 wx.Window 是一个基类 ...

  7. Google Analytics统计代码GA.JS中文教程

    2010-12-06 11:07:08|  分类: java编程 |  标签:google  analytics  ga  js  代码  |举报|字号 订阅     Google Analytics ...

  8. 学习Nim语言.rar(nim语言中文教程下载)

    学习Nim语言 nim 语法上类似python ,是一门静态编译型语言,nim 使用空格缩进标示语句块的开始和结束, 喜欢python风格的程序员应该也会很容易适应和喜欢nim的风格. nim语言官方 ...

  9. PhpStorm中文教程

    PhpStorm中文教程 | 浏览:15972 | 更新:2014-06-10 21:14 1 2 3 4 5 分步阅读 PhpStorm是一款强大的IDE,非常适合于PHP开发人员及前端工程师.提供 ...

随机推荐

  1. linux 下rabbitmq 安装

    准备工作: erlang环境  otp_src_19.0.tar.gz rabbitmq   abbitmq-server-generic-unix-3.6.5.tar.xz # yum -y ins ...

  2. recyclerview item点击事件

    recyclerview早就不陌生了,比起过去传统的listView,样式更多,也较为高效一点,这里整理一下recylerview中item的点击事件. recyclerview和listView不同 ...

  3. eclipse中注释常用关键字

    关键词列表: @author 作者名 @date 日期 @version 版本标识 @parameter 参数及其意义 @since 最早使用该方法/类/接口的JDK版本 @return 返回值 @t ...

  4. Android性能测试工具Emmagee

    下面介绍一个简单实用的Android性能软件 ~~欢迎加入测试群574875837一起讨论研究 一.Emmagee 简介 Emmagee主要用于监控单个App的CPU,内存,流量,启动耗时,电量,电流 ...

  5. java基础:学员状态查询

    package kaoshi; /* * 学员状态查询 * @作者:向往的生活 * @时间:2017.3.7 */ import java.util.Scanner; public class Stu ...

  6. Sort List leetcode

    这个题一开始本想用快速排序的,但是想了20分钟都没有头绪,难点在于快速排序的随机访问无法用链表实现,不过如果可以实现快速排序partition函数就可以了,但是这可能比较复杂,于是改用其他排序方法,上 ...

  7. 获取3个月前的时间(获取某一天的时间 NSDate)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; ...

  8. Java设计模式之职责型模式总结

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6548127.html 所谓职责型模式,就是采用各种模式来分配各个类的职责. 职责型模式包括 ...

  9. webStorm Linux Ubuntu 中文搜狗输入问题

    1 打开安装路径下bin/webstorm.sh vim ~/WebStorm-145.597.6/bin/webstorm.sh 2.在打开文件的最前面加入如下代码: export XMODIFIE ...

  10. mybatis只能模糊查询英文不能查询中文

    解决方法:修改配置文件,最简单的完美修改方法,修改mysql的my.cnf文件中的字符集键值(注意配置的字段细节): 1.在[client]字段里加入default-character-set=utf ...