Mixins

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

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

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

Mixin 就是用來定義一些方法，使用這個(gè) mixin 的組件能夠自由的使用這些方法（就像在組件中定義的一樣），所以 mixin 相當(dāng)于組件的一個(gè)擴(kuò)展，在 mixin 中也能定義“生命周期”方法。

比如一個(gè)定時(shí)器的 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 的強(qiáng)大之處在于，如果一個(gè)組件使用了多個(gè) mixins，其中幾個(gè) mixins 定義了相同的“生命周期方法”，這些方法會(huì)在組件相應(yīng)的方法執(zhí)行完之后按 mixins 指定的數(shù)組順序執(zhí)行。