React是基於元件的，也就是整個專案是各個元件組合到一起的，這樣往往會用到通用的一些特性，這就衍生了mixin的概念。

其實，mixin，可以非常簡單的理解，他就是把 一個 mixin 物件上的方法都混合到了另一個元件上，和 es6的extend極為類似。

在mixin中寫的生命週期相關的回撥都會被合併，也就是他們都會執行，而不會互相覆蓋掉。

比如 你在mixin中可以定義 componentDidMount 來初始化元件，他不會覆蓋掉使用這個mixin的元件。實際執行的時候，會先執行 mixin 的 componentDidMount ，最後執行元件的 componentDidMount 方法。

需要注意的是，因為mixin的作用是抽離公共功能，不存在渲染dom的需要，所以它沒有render方法。如果你定義了render方法，那麼他會和元件的render方法衝突而報錯。

同樣，mixin不應該汙染state，所以他也沒有 setState 方法。mixin應該只提供介面（即方法），不應該提供任何屬性。mixin內部的屬性最好是通過閉包的形式作為私有變數存在。

就像下面這樣：

 <script type='text/babel'>

        var IntervalMixin = {

            setInterval: function (callback, interval)
 
 {
                var token = setInterval(callback, interval);
                this._intervals.push(token);
                return token;
            },
            componentDidMount: function () {
                this._intervals = [];
                console.log("1");
            },
            componentWillUnmount: function
 
 () {
                this._intervals.map(clearInterval);
            }
        };

        var Since2014 = React.createClass({
            mixins: [IntervalMixin], // Use the mixin
            componentDidMount: function () {
                this.setInterval(this.forceUpdate.bind(this), 1000);
                console.log("2");
            },
            render: function () {
                var from = Number(new Date(2014, 0, 1));
                var to = Date.now();
                return (
                        <div>{Math.round((to-from)/1000)}
                </div>
                );
            }
        });

        ReactDOM.render(<Since2014/>, document.getElementById('app'));
    </script>

這就是mixin， 大家可以自己嘗試一下吧！