React-Mixin和Hoc 和Hook 系列

[PleaseStartYourPerformance]

起因

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

改变

Mixin、HOC 和 Hook 是 React 采用的 3 种 状态逻辑复用 的技术，Mixin 已被抛弃，HOC 正当壮年，Hook 初露锋芒，掌握它迭代因素和规律非常重要。

Mixin

Mixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去。

不过你可以拷贝任意多个对象的任意个方法到一个新对象上去，这是继承所不能实现的。

它的出现主要就是为了解决代码复用问题。

![image](https://user-images.githubusercontent.com/53254347/118459864-bd76f300-b72e-11eb-8485-
86c35c1018e4.png)

但是，它会带来一些危害：

1.Mixin 相互依赖、相互耦合，不利于代码维护
2.不同的 Mixin 中的方法可能会互相冲突
3.Mixin 非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样给代码造成滚雪球式的复杂性。

Hoc(高阶组件)

高阶组件类似高阶函数，高阶组件接收一个组件作为参数，并返回一个新的组件。

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

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

高阶组件可以应用于 日志打点、可用权限控制、双向绑定、表单校验等。

高阶组件解决了 Mixin 带来的问题：

低耦合。高阶组件就是一个没有副作用的纯函数，各个高阶组件不会互相依赖耦合
避免冲突。高阶组件也有可能造成冲突，但我们可以在遵守约定的情况下避免这些行为
副作用小。高阶组件并不关心数据使用的方式和原因，而被包裹的组件也不关心数据来自何处。高阶组件的增加不会为原组件增加负担
但是，有光的地方总有暗，高阶组件也存在一些缺陷：

HOC 需要在原组件上进行包裹或者嵌套，如果大量使用 HOC，将会产生非常多的嵌套，这让调试变得非常困难。
HOC 可以劫持 props，在不遵守约定的情况下也可能造成冲突

Hook

Hook 是 React v16.7.0-alpha 中加入的新特性。它可以让你在 class 以外使用 state 和其他 React 特性。

使用 Hook，你可以在将含有 state 的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。

同时，Hook 可以帮助你在不重写组件结构的情况下复用这些逻辑。

所以，它也可以作为一种实现状态逻辑复用的方案。

Hook 使用带来的好处：

减少状态逻辑复用的风险：Hook 和 Mixin 在用法上有一定的相似之处，但是 Mixin 引入的逻辑和状态是可以相互覆盖的，而多个 Hook 之间互不影响，这让我们不需要在把一部分精力放在防止避免逻辑复用的冲突上。
避免地狱式嵌套：大量使用 HOC 的情况下让我们的代码变得嵌套层级非常深，使用 Hook，我们可以实现扁平式的状态逻辑复用，而避免了大量的组件嵌套。
让组件更容易理解：在使用 class 组件构建我们的程序时，他们各自拥有自己的状态，业务逻辑的复杂使这些组件变得越来越庞大，各个生命周期中会调用越来越多的逻辑，越来越难以维护。使用 Hook，可以让你更大限度的将公用逻辑抽离，将一个组件分割成更小的函数，而不是强制基于生命周期方法进行分割。
使用函数代替 class：相比函数，编写一个 class 可能需要掌握更多的知识，需要注意的点也越多，比如 this 指向、绑定事件等等。另外，计算机理解一个函数比理解一个 class 更快。Hooks 让你可以在 class 之外使用更多 React 的新特性。