NOTE: 使用 ES6 class 定義的組件已經(jīng)不支持 mixin 了，因為使用 mixin 的場景都可以用組合組件這種模式來做到，參見 Mixins Are Dead. Long Live Composition

這里暫時留存這部分內(nèi)容。

雖然組件的原則就是模塊化，彼此之間相互獨立，但是有時候不同的組件之間可能會共用一些功能，共享一部分代碼。所以 React 提供了 mixins 這種方式來處理這種問題。

Mixin 就是用來定義一些方法，使用這個 mixin 的組件能夠自由的使用這些方法（就像在組件中定義的一樣），所以 mixin 相當(dāng)于組件的一個擴展，在 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 定義了相同的“生命周期方法”，這些方法會在組件相應(yīng)的方法執(zhí)行完之后按 mixins 指定的數(shù)組順序執(zhí)行。