Mixin

Mixin(混合)，在前端开发中很常用，它不是某个库或框架特有的，不管是React或Vue中都存在，是一种面向对象的表现形式。

好处

它可以封装公共的变量、方法、组件，用于不同的组件中作为初始值，如果某个组件引入了Mixin，同时也需要改变原值或逻辑，也可以进行修改。

不足

但Mixin是典型的多继承，谁都可以用，而且可以相互引用，mixin1可以引用mixin2；同理，mixin2也可以引用mixin1，相互引用，陷入无限循环，这样势必造成混乱，给问题排查造成了阻碍。

当在某个组件中引入了多个mixin时，而组件中只使用了变量或方法，而没有发现来源，这个时候是无法知道它在哪个mixin中的，更严重的是，引入的mixin还引入了其他的mixin。

React不推荐使用Mixin

针对这个痛点，React率先提出并提供了解决方案。

首先是使用了HOC高阶组件的概念，它的核心思想是输入一个组件，然后输出另一个组件，这样的话，任何一个组件都可能作为公共的业务逻辑被应用到另一个组件中。

这种方式其实问题也不少，显而易见的是当组件不断调组件，当调用层级很多，就会生成多余的节点，并且在传递props值的过程中，某一个组件如果修改了逻辑，势必会影响下一层甚至几层的值，而不被开发者知道。

React从16.8.0版本开始，引入了Hooks概念，它可以让你在不编写class的情况下使用state和React的其他特性。如下，useState就是一个Hook

import React, { useState } from 'react'
function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

除了官方提供的Hooks，我们也可以自定义Hook，但必须以use开头，这个约定非常重要。在自定义Hook内部也可以调用其他Hook。