React 中的 Mixin

最近在复习到 React 高阶组件相关内容的时候，发现之前比较常见的 Mixin 已经差不多被废弃了，而 HOC 相关内容也渐渐的在被 Hook 所替代，只能感叹变化太快

所以在这里打算重新的从头梳理一下，将之前博客当中关于 React 的一些过时内容也删减整合一下，也算是重新的温习一下 React 当中的几种状态逻辑复用的方式，也就是 Mixin，HOC 和 Hook 它们几者的实现原理、使用方法、实际应用以及如何选择等内容

我们先从快要被抛弃的 Mixin 开始看起，不过内容不会介绍很多，毕竟现在使用的已经不是很多了

Mixin 设计模式

在学习 JavaScript 的过程当中，我们可能已经听闻过 Mixin 这个东西，JavaScript 语言的设计是单一继承，即子类只能继承一个父类，不允许继承多个父类，毕竟一个对象只有一个原型，如果想实现多继承怎么办呢？所以在这种情况下就出现了 Mixin

Mixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，不过你可以拷贝任意多个对象的任意个方法到一个新对象上去，这是继承所不能实现的，它的出现主要就是为了解决代码复用问题，我们可以自己尝试封装一个 Mixin 方法来感受下

function mixin(destClass, srcClass) {
  var destProto = destClass.prototype
  var srcProto = srcClass.prototype
  for (var method in srcProto) {
    if (!destProto[method]) {
      destProto[method] = srcProto[method]
    }
  }
}

function Parent() { }
Parent.prototype.say = function () {
  console.log('hello')
}

function Child() { }

mixin(Child, Parent)

var child = new Child()
child.say()  // hello

再比如下面这个 Mixin 实现多继承

function mixin(destClass) {
  var classes = Array.prototype.slice.call(arguments, 1)
  for (var i = 0; i < classes.length; i++) {
    var srcClass = classes[i]
    var srcProto = srcClass.prototype
    var destProto = destClass.prototype
    for (var method in srcProto) {
      if (!destProto[method]) {
        destProto[method] = srcProto[method]
      }
    }
  }
}

function Parent() { }
Parent.prototype.getName = function () { }
Parent.prototype.setName = function () { }

function Child() { }
Child.prototype.showName = function () { }

function Man() { }

mixin(Man, Child, Parent)
var man = new Man()

console.log(man.__proto__)
// {
//   getName: ƒ ()
//   setName: ƒ ()
//   showName: ƒ ()
//   constructor: ƒ Man()
// }

其实在很多开源库当中都提供了 Mixin 的实现，比如 Underscore 的 _.extend 方法，jQuery 的 extend 方法，这里我们来看看如何使用 _.extend 方法实现代码复用

var Mixin = {
  sayHello: function () {
    console.log('hello')
  },
  sayWorld: function () {
    console.log('world')
  },
}

function Foo() { }
function Bar() { }

_.extend(Foo.prototype, Mixin)
_.extend(Bar.prototype, Mixin)

var foo = new Foo()
var bar = new Bar()

foo.sayHello()  // hello
bar.sayWorld()  // world

看完了 Mixin 的基本使用方式以后我们再来看看如何在 React 中应用 Mixin