简介

Mixin 本质就是一组方法。
Mixin 的目的是横向抽离出组件的相似代码。
相似概念：面向切面编程、插件。

// 将 mixins 上的方法，绑定到 obj.__proto__ 上，使得 obj 可以使用 mixins 的方法
const createMixin = (obj, mixins) => {
  obj.__proto__ = Object.assign(obj.__proto__, mixins);
  return obj;
}
// 使用示例
// mixins
const sayMixin = {
  say: function () {
    console.log('hello, my name is ' + this.name);
  }
}
class User {
  constructor(name) {
    this.name = name;
  }
}
const user = new User('konsoue');
createMixin(user, sayMixin);
user.say()

我们使用继承时，是纵向的父子关系，需要去额外抽象类出来，处理这些逻辑。
而 mixin 可以让我们横向的，像在横的方向切一刀似的，假如一些方法、逻辑。

React 中的 mixin

var SetIntervalMixin = {
  componentWillMount: function () {
    this.intervals = []
  },
  setInterval: function (fn, timeout, ...args) {
    this.intervals.push(setInterval(fn, timeout, ...args))
  },
  componentWillUnmount: function () {
    this.intervals.forEach(clearInterval)
  }
}
var TickTock = React.creatClass({
  mixins: [SetIntervalMixin],
  getInitialState: function () {
    return { seconds: 0 }
  }
})