React：mixin

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

上面的代码中，我们定义了一个默认的name属性。

加入到React组件中

要使用mixin，我们只需要组件中加入mixins属性，然后把mixin包裹成一个数组，将它作为该属性的值即可：

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
);

//渲染结果
<div>
  <p>tg</p>
  <p>tg</p>
</div>

上面的代码中，我们将同一个mixin加入了两个组件，它们都可以获取到name属性。

2、防止静默函数覆盖

防止静默函数覆盖，也可以这样理解，当mixin中包含生命周期方法时，mixin中的生命周期方法和组件类中的生命周期方法并不会互相覆盖，而是两者合并，都会被执行。

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
);

//打印结果
1
2
Object {a: 1, b: 1}

从上面代码的运行结果来看，我们可以知道mixin方法里的getDefaultProps方法和组件类中的getDefaultProps方法都执行了，而且执行顺序是：mixin里的先执行，组件类里的后执行。最终的初始props是{a:1,b:1}。

注意事项

（1）因为mixin的作用是抽离通用功能，不需要渲染DOM，所以它没有render方法。如果你定义了render方法，React会报错：

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

（2）不能设置相同的props或state

如果设置相同的props或state，会报错：

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

（3）不能设置同名方法

如果设置同名方法，会报错：

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

3、多个mixin混合

上面我们提到传递给mixins属性的值应该是一个数组，所以我们可以在组件中包含多个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
);

//打印结果
1
2
3
Object {a: 1, h: 1, b: 1}

在上面的代码中，我们定义了两个mixin，然后以数组的形式传递给组件类的mixins属性，最终返回的默认props是{a:1,h:1,b:1}。

由此得知，一个组件不仅能包含多个mixin，而且如果一个组件使用了多个mixin，并且有多个mixin定义了相同的生命周期方法，所有这些生命周期方法都会被执行。

方法执行顺序：

mixin内的方法按引入顺序执行，也就是从左到右，最后才执行组件类内定义的方法。