摘要：可以說，相比繼承而已，更喜歡這種組合的方式。需要指出的是，是可以包含在其他的中的程序會在控制臺打印出。包含多個我們的要包裹在數組當中，提醒了我們可以在組件中包含多個注意事項這里有幾件事需要引起我們的注意，當我們使用的時候。

update: Mixin 只適用于 ES5。如果你的項目里面用的是 ES6 ，可以采用高階組件來實現 Mixin 的功能。

我使用 React.js 構建大型項目已經有一段時間了，我遇到過很多在不同的組件中都要用到相同功能的情況。因此，我花了一個小時左右的時間去了解mixin的用法，然后分享我所學習到的一些東西。

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

現在假設我們在寫一個app，我們知道在某些情況下我們需要在好幾個組件當中設置默認的name屬性。
現在，我們不再是像以前一樣在每個組件中寫多個同樣的getDefaultProps方法，我們可以像下面一樣定義一個mixin：

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

它沒什么特殊的，就是一個簡單的對象而已。

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

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

React.renderComponent(, document.body);

JSFiddle 示例：一個簡單的 mixin 例子

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

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

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

JSFiddle 示例：在多個組件中使用同一個 mixin

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

JSFiddle 示例：展示了兩個 default props 都會被設置

兩個getDefaultProps方法都將被調用，所以我們可以得到默認為Skippy的name屬性和默認為Pancakes的food屬性。任何一個生命周期方法或屬性都會被順利地重復調用，但是下面的情況除外：

render：包含多個render方法是不行的。React 會跑出異常：

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：你多次的對它進行設置是沒有問題的，但是，最終的結果只以最后一次設置為準。

需要指出的是，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);

程序會在控制臺打印出asdas。

我們的mixins要包裹在數組當中，提醒了我們可以在組件中包含多個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}
            
        );
    }
});

這里有幾件事需要引起我們的注意，當我們使用mixins的時候。 幸運地是，這些看起來并不是什么大問題，下面是我們在實踐當中發現的一些問題：

如果你嘗試在不同的地方定義相同的屬性時會出現下面的異常：

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

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

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方法時拋出的異常一樣：

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中都包含了相同的生命周期方法的話會怎樣呢？

我們的mixin方法首先會被調用，然后再是組件的中方法被調用。

那當我們的組件中包含多個mixin，而這些mixin中又包含相同的生命周期方法時，調用順序又是如何？

它們會根據mixins中的順序從左到右的進行調用。

實例代碼：

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");
    },
    ...

控制臺將輸出：

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.
我希望這篇文章能夠對你有所幫助，如果有任何反饋，很高興你能夠在twitter上@veddermatic

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

翻譯水平有限，文中帶有個人理解，如有不恰當的地方，請在評論中指出，非常感謝！