【React深入】从Mixin到HOC再到Hook

摘要：与继承相比，装饰者是一种更轻便灵活的做法。它只是一种模式，这种模式是由自身的组合性质必然产生的。对比原生组件增强的项可操作所有传入的可操作组件的生命周期可操作组件的方法获取反向继承返回一个组件，继承原组件，在中调用原组件的。

前端发展速度非常之快，页面和组件变得越来越复杂，如何更好的实现状态逻辑复用一直都是应用程序中重要的一部分，这直接关系着应用程序的质量以及维护的难易程度。

本文介绍了React采用的三种实现状态逻辑复用的技术，并分析了他们的实现原理、使用方法、实际应用以及如何选择使用他们。

本文略长，下面是本文的思维导图，您可以从头开始阅读，也可以选择感兴趣的部分阅读：

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

很多开源库提供了Mixin的实现，如Underscore的_.extend方法、JQuery的extend方法。

使用_.extend方法实现代码复用：

var LogMixin = {
  actionLog: function() {
    console.log("action...");
  },
  requestLog: function() {
    console.log("request...");
  },
};
function User() {  /*..*/  }
function Goods() {  /*..*/ }
_.extend(User.prototype, LogMixin);
_.extend(Goods.prototype, LogMixin);
var user = new User();
var good = new Goods();
user.actionLog();
good.requestLog();

我们可以尝试手动写一个简单的Mixin方法：

function setMixin(target, mixin) {
  if (arguments[2]) {
    for (var i = 2, len = arguments.length; i < len; i++) {
      target.prototype[arguments[i]] = mixin.prototype[arguments[i]];
    }
  }
  else {
    for (var methodName in mixin.prototype) {
      if (!Object.hasOwnProperty(target.prototype, methodName)) {
        target.prototype[methodName] = mixin.prototype[methodName];
      }
    }
  }
}
setMixin(User,LogMixin,"actionLog");
setMixin(Goods,LogMixin,"requestLog");

您可以使用setMixin方法将任意对象的任意方法扩展到目标对象上。

React也提供了Mixin的实现，如果完全不同的组件有相似的功能，我们可以引入来实现代码复用，当然只有在使用createClass来创建React组件时才可以使用，因为在React组件的es6写法中它已经被废弃掉了。

例如下面的例子，很多组件或页面都需要记录用户行为，性能指标等。如果我们在每个组件都引入写日志的逻辑，会产生大量重复代码，通过Mixin我们可以解决这一问题：

var LogMixin = {
  log: function() {
    console.log("log");
  },
  componentDidMount: function() {
    console.log("in");
  },
  componentWillUnmount: function() {
    console.log("out");
  }
};

var User = React.createClass({
  mixins: [LogMixin],
  render: function() {
    return (
...
)
  }
});

var Goods = React.createClass({
  mixins: [LogMixin],
  render: function() {
    return (
...
)
  }
});

React官方文档在Mixins Considered Harmful一文中提到了Mixin带来了危害：

Mixin 可能会相互依赖，相互耦合，不利于代码维护

不同的 Mixin 中的方法可能会相互冲突

Mixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性

React现在已经不再推荐使用Mixin来解决代码复用问题，因为Mixin带来的危害比他产生的价值还要巨大，并且React全面推荐使用高阶组件来替代它。另外，高阶组件还能实现更多其他更强大的功能，在学习高阶组件之前，我们先来看一个设计模式。

装饰者(decorator)模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。

高阶组件可以看作React对装饰模式的一种实现，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。

高阶组件（HOC）是React中的高级技术，用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由React自身的组合性质必然产生的。

function visible(WrappedComponent) {
  return class extends Component {
    render() {
      const { visible, ...props } = this.props;
      if (visible === false) return null;
      return ;
    }
  }
}

上面的代码就是一个HOC的简单应用，函数接收一个组件作为参数，并返回一个新组件，新组建可以接收一个visible props，根据visible的值来判断是否渲染Visible。

下面我们从以下几方面来具体探索HOC。

函数返回一个我们自己定义的组件，然后在render中返回要包裹的组件，这样我们就可以代理所有传入的props，并且决定如何渲染，实际上 ，这种方式生成的高阶组件就是原组件的父组件，上面的函数visible就是一个HOC属性代理的实现方式。

function proxyHOC(WrappedComponent) {
  return class extends Component {
    render() {
      return ;
    }
  }
}

对比原生组件增强的项：

可操作所有传入的props

可操作组件的生命周期

可操作组件的static方法

获取refs

返回一个组件，继承原组件，在render中调用原组件的render。由于继承了原组件，能通过this访问到原组件的生命周期、props、state、render等，相比属性代理它能操作更多的属性。

function inheritHOC(WrappedComponent) {
  return class extends WrappedComponent {
    render() {
      return super.render();
    }
  }
}

对比原生组件增强的项：

可操作所有传入的props

可操作组件的生命周期

可操作组件的static方法

获取refs

可操作state

可以渲染劫持

可使用任何其他组件和原组件进行组合渲染，达到样式、布局复用等效果。

通过属性代理实现

function stylHOC(WrappedComponent) {
  return class extends Component {
    render() {
      return (

        
{this.props.title}
        
      
);
    }
  }
}

通过反向继承实现

function styleHOC(WrappedComponent) {
  return class extends WrappedComponent {
    render() {
      return 

        
{this.props.title}
        {super.render()}
      
    }
  }
}

根据特定的属性决定原组件是否渲染

通过属性代理实现

function visibleHOC(WrappedComponent) {
  return class extends Component {
    render() {
      if (this.props.visible === false) return null;
      return ;
    }
  }
}

通过反向继承实现

function visibleHOC(WrappedComponent) {
  return class extends WrappedComponent {
    render() {
      if (this.props.visible === false) {
        return null
      } else {
        return super.render()
      }
    }
  }
}

可以对传入组件的props进行增加、修改、删除或者根据特定的props进行特殊的操作。

通过属性代理实现

function proxyHOC(WrappedComponent) {
  return class extends Component {
    render() {
      const newProps = {
        ...this.props,
        user: "ConardLi"
      }
      return ;
    }
  }
}

高阶组件中可获取原组件的ref，通过ref获取组件实力，如下面的代码，当程序初始化完成后调用原组件的log方法。(不知道refs怎么用，请