从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

---

  为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在React v16.7.0-alpha 中提出了hooks的概念，在本身无状态的函数组件，引入独立的状态空间，也就是说在函数组件中，也可以引入类组件中的state和组件生命周期，使得函数组件变得丰富多彩起来，此外，hooks也保证了逻辑代码的复用性和独立性。

  本文从针对类组件的复用解决方案开始说起，先后介绍了从Mixin、HOC到Render props的演进，最后介绍了React v16.7.0-alpha 中的 hooks以及自定义一个hooks

• Mixin
• HOC
• Render props
• React hooks的介绍以及如何自定义一个hooks

本文的原文地址发布在我的博客中：https://github.com/forthealllight/blog/issues/29

欢迎star和fork～

---

一、Mixin

Mixin是最早出现的复用类组件中业务逻辑代码的解决方案，首先来介绍以下如何适应Mixin。下面是一个Mixin的例子：

const someMixins={
   
  printColor(){
   
    console.log(this.state.color);
  }
  setColor(newColor){
   
    this.setState({
   color:newColor})
  }
  componentDidMount(){
   
    ..
  }
}

下面是一个使用Mixin的组件：

class Apple extends React.Component{
   
  //仅仅作为演示，mixins一般是通过React.createClass创建，并且ES6中没有这种写法
  mixins:[someMixins]
  constructor(props){
   
    super(props);
    this.state={
   
      color:'red'
    }
    this.printColor=this.printColor.bind(this);
  }
  render(){
   
    return <div className="m-box" onClick={
   this.printColor}>
                这是一个苹果
           </div>
  }
}

在类中mixin引入公共业务逻辑：

mixins:[someMixins]

从上面的例子，我们来总结以下mixin的缺点：

• Mixin是可以存在多个的，是一个数组的形式，且Mixin中的函数是可以调用setState方法组件中的state的，因此如果有多处Mixin的模块中修改了相同的state，会无法确定state的更新来源

• ES6 classes支持的是继承的模式，而不支持Mixins

• Mixin会存在覆盖，比如说两个Mixin模块，存在相同生命周期函数或者相同函数名的函数，那么会存在相同函数的覆盖问题。

Mixin已经被废除，具体缺陷可以参考Mixins Considered Harmful

二、HOC

  为了解决Mixin的缺陷，第二种解决方案是高阶组件（high order component,简称HOC）。

1、举例几种HOC的形式

  HOC简单理解就是组件工厂，接受原始组件作为参数，添加完功能与业务后，返回新的组件。下面来介绍HOC参数的几个例子。

(1)参数仅为原始组件

const redApple = withFruit(Apple);

(2)参数为原始组件和一个对象

const redApple = withFruit(Apple，{
   color:'red',weight:'200g'});

但是这种情况比较少用，如果对象中仅仅传递的是属性，其实完全可以通过组件的props实现值的传递，我们用HOC的主要目的是分离业务，关于UI的展示，以及一些组件中的属性和状态，我们一般通过props来指定比较方便

(3)参数为原始组件和一个函数

const redApp=withFruit(App,()=>{
   console.log('I am a fruit')})

(4)柯里化

最常见的是仅以一个原始组件作为参数，但是在外