摘要：可以說(shuō)，相比繼承而已，更喜歡這種組合的方式。需要指出的是，是可以包含在其他的中的程序會(huì)在控制臺(tái)打印出。包含多個(gè)我們的要包裹在數(shù)組當(dāng)中，提醒了我們可以在組件中包含多個(gè)注意事項(xiàng)這里有幾件事需要引起我們的注意，當(dāng)我們使用的時(shí)候。

update: Mixin 只適用于 ES5。如果你的項(xiàng)目里面用的是 ES6 ，可以采用高階組件來(lái)實(shí)現(xiàn) Mixin 的功能。

我使用 React.js 構(gòu)建大型項(xiàng)目已經(jīng)有一段時(shí)間了，我遇到過(guò)很多在不同的組件中都要用到相同功能的情況。因此，我花了一個(gè)小時(shí)左右的時(shí)間去了解mixin的用法，然后分享我所學(xué)習(xí)到的一些東西。

React回避子類組件，但是我們知道，到處重復(fù)地編寫同樣的代碼是不好的。所以為了將同樣的功能添加到多個(gè)組件當(dāng)中，你需要將這些通用的功能包裝成一個(gè)mixin，然后導(dǎo)入到你的模塊中。 可以說(shuō)，相比繼承而已，React更喜歡這種組合的方式。嗯，我也喜歡這樣。

現(xiàn)在假設(shè)我們?cè)趯懸粋€(gè)app，我們知道在某些情況下我們需要在好幾個(gè)組件當(dāng)中設(shè)置默認(rèn)的name屬性。
現(xiàn)在，我們不再是像以前一樣在每個(gè)組件中寫多個(gè)同樣的getDefaultProps方法，我們可以像下面一樣定義一個(gè)mixin：

var DefaultNameMixin = {
    getDefaultProps: function () {
        return {name: "Skippy"};
    }
};

它沒什么特殊的，就是一個(gè)簡(jiǎn)單的對(duì)象而已。

為了使用mixin，我們只需要簡(jiǎn)單得在組件中加入mixins屬性，然后把剛才我們寫的mixin包裹成一個(gè)數(shù)組，將它作為該屬性的值即可：

var ComponentOne = React.createClass({
    mixins: [DefaultNameMixin],
    render: function() {
    return 
Hello {this.props.name}
;
    }
});

React.renderComponent(, document.body);

JSFiddle 示例：一個(gè)簡(jiǎn)單的 mixin 例子

就像你想象的那樣，我們可以在任何其他組件中包含我們的mixin：

var ComponentTwo = React.createClass({
    mixins: [DefaultNameMixin],
    render: function () {
        return (
            

                
{this.props.name}
                
Favorite food: {this.props.food}
            
        );
    }
});

JSFiddle 示例：在多個(gè)組件中使用同一個(gè) mixin

如何你的mixin當(dāng)中包含生命周期方法，不要焦急，你仍然可以在你的組件中使用這些方法，而且它們都會(huì)被調(diào)用：

JSFiddle 示例：展示了兩個(gè) default props 都會(huì)被設(shè)置

兩個(gè)getDefaultProps方法都將被調(diào)用，所以我們可以得到默認(rèn)為Skippy的name屬性和默認(rèn)為Pancakes的food屬性。任何一個(gè)生命周期方法或?qū)傩远紩?huì)被順利地重復(fù)調(diào)用，但是下面的情況除外：

render：包含多個(gè)render方法是不行的。React 會(huì)跑出異常：

Uncaught Error: Invariant Violation: ReactCompositeComponentInterface: 
You are attempting to define `render` on your component more than once. 
This conflict may be due to a mixin.

displayName：你多次的對(duì)它進(jìn)行設(shè)置是沒有問題的，但是，最終的結(jié)果只以最后一次設(shè)置為準(zhǔn)。

需要指出的是，mixin是可以包含在其他的mixin中的：

var UselessMixin = {
    componentDidMount: function () {
      console.log("asdas");
    }
};

var LolMixin = {
   mixins: [UselessMixin]
};

var PantsOpinion = React.createClass({
   mixins: [LolMixin],
   render: function () {
       return (
I dislike pants
);
   }
});

React.renderComponent(, document.body);

程序會(huì)在控制臺(tái)打印出asdas。

我們的mixins要包裹在數(shù)組當(dāng)中，提醒了我們可以在組件中包含多個(gè)mixins：

var DefaultNameMixin = {
    getDefaultProps: function () {
        return {name: "Lizie"};
    }
};

var DefaultFoodMixin = {
    getDefaultProps: function () {
        return {food: "Pancakes"};
    }
};

var ComponentTwo = React.createClass({
    mixins: [DefaultNameMixin, DefaultFoodMixin],
    render: function () {
        return (
            

                
{this.props.name}
                
Favorite food: {this.props.food}
            
        );
    }
});

這里有幾件事需要引起我們的注意，當(dāng)我們使用mixins的時(shí)候。 幸運(yùn)地是，這些看起來(lái)并不是什么大問題，下面是我們?cè)趯?shí)踐當(dāng)中發(fā)現(xiàn)的一些問題：

如果你嘗試在不同的地方定義相同的屬性時(shí)會(huì)出現(xiàn)下面的異常：

Uncaught Error: Invariant Violation: mergeObjectsWithNoDuplicateKeys(): 
Tried to merge two objects with the same key: name

在不同的mixin中定義相同的方法，或者mixin和組件中包含了相同的方法時(shí)，會(huì)拋出異常：

var LogOnMountMixin = {
    componentDidMount: function () {
        console.log("mixin mount method");
        this.logBlah()
    },
    // add a logBlah method here...
    logBlah: function () {
        console.log("blah");
    }
};

var MoreLogOnMountMixin = {
    componentDidMount: function () {
        console.log("another mixin mount method");
    },
    // ... and again here.
    logBlah: function () {
        console.log("something other than blah");
    }
};

異常信息同多次定義rander方法時(shí)拋出的異常一樣：

Uncaught Error: Invariant Violation: ReactCompositeComponentInterface: 
You are attempting to define `logBlah` on your component more than once. 
This conflict may be due to a mixin.

如果我們的組件和mixin中都包含了相同的生命周期方法的話會(huì)怎樣呢？

我們的mixin方法首先會(huì)被調(diào)用，然后再是組件的中方法被調(diào)用。

那當(dāng)我們的組件中包含多個(gè)mixin，而這些mixin中又包含相同的生命周期方法時(shí)，調(diào)用順序又是如何？

它們會(huì)根據(jù)mixins中的順序從左到右的進(jìn)行調(diào)用。

實(shí)例代碼：

var LogOnMountMixin = {
    componentDidMount: function () {
        console.log("mixin mount method");
    }
};

var MoreLogOnMountMixin = {
    componentDidMount: function () {
        console.log("another mixin mount method");
    }
};
var ComponentOne = React.createClass({
    mixins: [MoreLogOnMountMixin, LogOnMountMixin],
    componentDidMount: function () {
        console.log("component one mount method");
    },
    ...

var ComponentTwo = React.createClass({
    mixins: [LogOnMountMixin, MoreLogOnMountMixin],
    componentDidMount: function () {
        console.log("component two mount method");
    },
    ...

控制臺(tái)將輸出：

another mixin mount method
mixin mount method 
component one mount method

mixin mount method
another mixin mount method 
component two mount method

Mixin 使你React程序變得更為可重用，It"s a Good Thing.
我希望這篇文章能夠?qū)δ阌兴鶐椭绻腥魏畏答?，很高興你能夠在twitter上@veddermatic

原文鏈接：http://simblestudios.com/blog...

翻譯水平有限，文中帶有個(gè)人理解，如有不恰當(dāng)?shù)牡胤?，?qǐng)?jiān)谠u(píng)論中指出，非常感謝！