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， 大家可以自己尝试一下吧！