为什么React不再使用Mixin虽然组件的原则就是模块化，彼此之间相互独立，但是有时候不同的组件之间可能会共用一些功能

虽然组件的原则就是模块化，彼此之间相互独立，但是有时候不同的组件之间可能会共用一些功能，共享一部分代码。所以 React 提供了 mixins 这种方式来处理这种问题（主要用于使用 createReactClass 创建 React 组件）。

Mixin 就是用来定义一些方法，使用这个 mixin 的组件能够自由的使用这些方法（就像在组件中定义的一样），所以 mixin 相当于组件的一个扩展，在 mixin 中也能定义“生命周期”方法。

比如一个定时器的 mixin：

var SetIntervalMixin = {
    componentWillMount: function() {
        this.intervals = [];
    },
    setInterval: function() {
        this.intervals.push(setInterval.apply(null, arguments));
    },
    componentWillUnmount: function() {
        this.intervals.map(clearInterval);
    }
};

var TickTock = React.createClass({
    mixins: [SetIntervalMixin], // Use the mixin
    getInitialState: function() {
        return {seconds: 0};
    },
    componentDidMount: function() {
        this.setInterval(this.tick, 1000); // Call a method on the mixin
    },
    tick: function() {
        this.setState({seconds: this.state.seconds + 1});
    },
    render: function() {
        return (
            <p>
                React has been running for {this.state.seconds} seconds.
            </p>
        );
    }
});

React.render(
    <TickTock />,
    document.getElementById('example')
);

React 的 mixins 的强大之处在于，如果组件拥有多个 mixins，且这些 mixins 中定义了相同的生命周期方法（例如，当组件被销毁时，几个 mixins 都想要进行一些清理工作），那么这些生命周期方法都会被调用的。使用 mixins 时，mixins 会先按照定义时的顺序执行，最后调用组件上对应的方法。

使用 ES6 class 定义的组件已经不支持 mixin 了，因为使用 mixin 的场景都可以用组合组件这种模式来做到（参见 Mixins Are Dead. Long Live Composition 、zh-hans.reactjs.org/blog/2016/0…）

Mixins在React中的使用是非显示的、混乱的，Mixins可以使用React中声明的方法，反之亦可。

比如一个mixin引用了组件中的状态，状态改变时，你能记起混入的mixin也引用了state吗？即使假设你发现了mixin中使用了该state，又如何知道并修改另外一个引用了该mixin的组件？更或者，当你想到追踪组件混入的mixin方法，发现mixin嵌套的层级是♾的：永远不知道为一个mixin添加方法会带来什么后果，可能和组件内方法出现命名冲突等。为了解决这些问题，react为我们推荐了HOC高阶组件（函数式编程模式，从一个组件包装成另一个组件）的方法：