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開始，這是我們碼農界的文化傳統。