React：mixin

var DefaultNameMixin = {
  getDefaultProps: function(){
    return {
      name: 'tg'
    };
  }
};

上面的代碼中，我們定義了一個(gè)默認(rèn)的name屬性。

加入到React組件中

要使用mixin，我們只需要組件中加入mixins屬性，然后把mixin包裹成一個(gè)數(shù)組，將它作為該屬性的值即可：

var MyTitle = React.createClass({
  mixins: [DefaultNameMixin],
  render: function(){
    return (
      <p>{this.props.name}</p>
    );
  }
});

var MyContent = React.createClass({
  mixins: [DefaultNameMixin],
  render: function(){
    return (
      <p>{this.props.name}</p>
    );
  }
});

ReactDOM.render(
  <div>
    <MyTitle/>
    <MyContent/>
  </div>,
  document.body
);

//渲染結(jié)果
<div>
  <p>tg</p>
  <p>tg</p>
</div>

上面的代碼中，我們將同一個(gè)mixin加入了兩個(gè)組件，它們都可以獲取到name屬性。

2、防止靜默函數(shù)覆蓋

防止靜默函數(shù)覆蓋，也可以這樣理解，當(dāng)mixin中包含生命周期方法時(shí)，mixin中的生命周期方法和組件類中的生命周期方法并不會(huì)互相覆蓋，而是兩者合并，都會(huì)被執(zhí)行。

var DefaultNameMixin = {   
  getDefaultProps: function(){   
    console.log(1);
    return {a:1}
  }  
};

var MyTitle = React.createClass({
  mixins: [DefaultNameMixin],
  getDefaultProps: function(){
    console.log(2);
    return {b:1}
  },
  render: function(){
    return (
      <p>{console.log(this.props)}</p>
    );
  }
});

ReactDOM.render(
  <div>
    <MyTitle/>
  </div>,
  document.body
);

//打印結(jié)果
1
2
Object {a: 1, b: 1}

從上面代碼的運(yùn)行結(jié)果來看，我們可以知道m(xù)ixin方法里的getDefaultProps方法和組件類中的getDefaultProps方法都執(zhí)行了，而且執(zhí)行順序是：mixin里的先執(zhí)行，組件類里的后執(zhí)行。最終的初始props是{a:1,b:1}。

注意事項(xiàng)

（1）因?yàn)閙ixin的作用是抽離通用功能，不需要渲染DOM，所以它沒有render方法。如果你定義了render方法，React會(huì)報(bào)錯(cuò)：

ReactClassInterface: You are attempting to define `render` on your component more than once. This conflict may be due to a mixin.

（2）不能設(shè)置相同的props或state

如果設(shè)置相同的props或state，會(huì)報(bào)錯(cuò)：

mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `name`. 

（3）不能設(shè)置同名方法

如果設(shè)置同名方法，會(huì)報(bào)錯(cuò)：

ReactClassInterface: You are attempting to define `name` on your component more than once. This conflict may be due to a mixin.

3、多個(gè)mixin混合

上面我們提到傳遞給mixins屬性的值應(yīng)該是一個(gè)數(shù)組，所以我們可以在組件中包含多個(gè)mixins：

var DefaultNameMixin = {   
  getDefaultProps: function(){   
    console.log(1);
    return {a:1}
  }  
};

var DefaultTitleMixin = {   
  getDefaultProps: function(){   
    console.log(2)   
    return {h:1};   
  }   
};

var MyTitle = React.createClass({
  mixins: [DefaultNameMixin,DefaultTitleMixin],
  getDefaultProps: function(){
    console.log(3);
    return {b:1}
  },
  render: function(){
    return (
      <p>{console.log(this.props)}</p>
    );
  }
});

ReactDOM.render(
  <div>
    <MyTitle/>
  </div>,
  document.body
);

//打印結(jié)果
1
2
3
Object {a: 1, h: 1, b: 1}

在上面的代碼中，我們定義了兩個(gè)mixin，然后以數(shù)組的形式傳遞給組件類的mixins屬性，最終返回的默認(rèn)props是{a:1,h:1,b:1}。

由此得知，一個(gè)組件不僅能包含多個(gè)mixin，而且如果一個(gè)組件使用了多個(gè)mixin，并且有多個(gè)mixin定義了相同的生命周期方法，所有這些生命周期方法都會(huì)被執(zhí)行。

方法執(zhí)行順序：

mixin內(nèi)的方法按引入順序執(zhí)行，也就是從左到右，最后才執(zhí)行組件類內(nèi)定義的方法。