定义Actions
var Reflux = require(‘reflux’);
var BookmarkActions = Reflux.createActions([‘fetch’]);
module.exports = BookmarkActions;
定义Store
var $ = require(‘jquery’);
var Reflux = require(‘reflux’);
var BookmarkActions = require(‘…/cations/bookmark-actions’);
var Utils = require(‘../utils/fetch-client’);
var BookmarkStore = Reflux.createStore({
listenables: [BookmarkActions],
init: function() {
this.onFetch();
},
onFetch: function(){
var self = this;
Util.fetch(‘/bookmarks’).then(functions(bookmarks){
self.trigger({
data: bookmarks,
match: ”
})
})
}
})
module.exports = BookmarkStore;
React是基于组件的,也就是整个项目是各个组件组合到一起,这样往往会用到通用的一些特性,这就衍生了,
mixin的概念。
其实mixin,可以非常简单的理解为,就是把一个mixin对象上方法都混合到另一个组件上去。
在mixin中写的生命周期相关的回调,都会被合并,也就是说他们都会被执行,并且不会相互覆盖。
比如你再mixin中定义componentDidmount来初始化组件,它不会覆盖使用这个mixin的组件,
实际执行的时候,会先执行mixin中的componentDidMout,最后执行组件的componentDidmount方法。
需要注意的是,因为 因为mixin的作用是抽离公共功能,不存在渲染dom的需要,所以它没有render方法。如果你定义了render方法,那么他会和组件的render方法冲突而报错。
同样,mixin不应该污染state,所以他也没有 setState 方法。mixin应该只提供接口(即方法),不应该提供任何属性。mixin内部的属性最好是通过闭包的形式作为私有变量存在。
到处编写同样的代码是不好的,所以为了将同样的功能太添加到多个组件当中,你需要将这些通用的功能包装成一个mixin,然后导入到你的模块中,可以说相比继承React更喜欢这种方式,恩,我也喜欢。
写一个简单的mixin
现在假设我们在写一个app,我们知道在某些情况下我们需要在好几个组件当中设置默认的name属性。
现在,我们不再是像以前一样在每个组件中写多个同样的getDefaultProps方法,我们可以像下面一样定义一个mixin:
var DefaultNameMixin = {
getDefaultProps: function(){
return {name: ‘xiaoyu’};
}
} // 没什么特殊的,就是一个简单的对象而已
将它加入到React组件中去。
为了使用mixin,我们只需要简单得在组件中加入mixins属性,然后把刚才我们写的mixin包裹成一个数组,将它作为该属性的值即可:
var ComponentOne = React.createClass({
mixins: [DefaultNameMixin],
render: function(){
return …
}
})
!!!!
生命周期方法会被重复调用!
如果你的mixin中包含了生命周期的方法,不用焦急,我们仍然可以在自己的组将中使用这些方法。,而且他们都会被调用。
但是唯独render方法除外,这个方法只能有一个,如果你写了两个render方法,react是会报错的。
多个生命周期方法的调用顺序
如果我们的组件和mixin中都包含了相同的生命周期方法的话会怎样呢?
回答: 我们的mixin方法首先会被调用,然后再是组件的中方法被调用。
那当我们的组件中包含多个mixin,而这些mixin中又包含相同的生命周期方法时,调用顺序又是如何?
回答: 它们会根据mixins中的顺序从左到右的进行调用
学习语言熊helloworld开始,学习框架从TODO开始,这是我们码农界的文化传统。