React（7.1）--mixin

前言：从 React 0.13 开始，mixin 逐渐退出历史舞台，React ES6 将不再支持 mixin，否则有悖 JavaScript 语义化的初衷。所以，这节我们只是简单说明一下 React 的 mixin，下一节才是我们的重点内容， React ES6 如何处理 mixin 。

- mixin 的缺点

• 一个组件和它的 mixin 之间的关联是隐式的。mixin 通常依赖于定义在组件中的特定方法，但是又没有办法可以从组件的定义中查看到。
• mixin 倾向于添加更多的状态到你的组件中，但其实我们希望能努力让状态精简， 等等……。

参考资料：React Mixin的前世今生、Mixin 已死，Composition万岁

- mixin 是什么

mixin 允许我们定义可以正在多个组件中公用的方法。

---

- 为什么使用 mixin

React 使用组合而不是继承来处理父子组件。无法通过继承父类来实现公共功能，所以 React 提供了mixin的机制。为了将同样的功能添加到多个组件当中，你需要将这些通用的功能包装成一个 mixin，然后导入到你的模块中。

---

- mixin 简单用例

//定义一个mixin
var DefaultColorMixin = {
       getDefaultProps: function () {
           return {color: red};
       }
};
//加入到组件中
var Example= React.createClass({
    mixins: [ DefaultColorMixin ],
    render: function() {
       return <h2>Hello {this.props.name}</h2>;
    }
});
ReactDOM.render(<Example/>, document.getElementById('app'));

为了使用 mixin，我们只需要简单得在组件中加入 mixins 属性，然后把刚才我们写的 mixin 包裹成一个数组，将它作为该属性的值即可。

---

mixin 使用补充

• 可以重复使用：不同组件可以重复使用同一个 mixin。
  
  
• 生命周期方法会被重复调用： mixin 中包含生命周期方法和组件中的同一个生命周期方法都会被调用（当然 render 方法除外）
  
  
• 组件、mixin 都可以包含多个 mixin：
  
  

---

mixin 注意事项

• 设置相同的 Prop 和 State： 报异常（Tried to merge two objects with the same key: name）
  
  
• 设置相同的方法：报异常（Uncaught Error: Invariant Violation: ReactCompositeComponentInterface: ……）
  
  
• 多个生命周期方法的调用顺序:
  
  
  1. 组件 和 mixin 中都包含了相同的生命周期方法： mixin 生命周期方法先调用，然后到组件方法。
     
     
  2. 多个 mixin，而这些 mixin 中又包含相同的生命周期方法：根据 mixins 中的顺序从左到右的进行调用。