mixin

定义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开始，这是我们码农界的文化传统。