Hooks是什么？为啥Vue和React都选择了它？

为啥要用Hooks

• 跨组件复用stateful logic十分困难 使用Hooks，你可以在将含有state的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。同时，Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑。
• 复杂的组件难以理解 Hooks允许您根据相关部分(例如设置订阅或获取数据)将一个组件分割成更小的函数，而不是强制基于生命周期方法进行分割。
• 不止是用户，机器也对Classes难以理解 Hooks让你可以在classes之外使用更多React的新特性。

Hooks的优点

更好的状态复用

假设有如下需求：

当组件实例创建时，需要创建一个 state 属性：name，并随机给此 name 属性赋值一个初始值。除此之外，还得提供一个 setName 方法。你可以在组件其他地方开销和修改此状态属性。

更重要的是: 这个逻辑要可以复用，在各种业务组件里复用这个逻辑。

在拥有 Hooks 之前，我首先会想到的解决方案一定是 mixin。

代码如下：(此示例采用 vue2 mixin 写法 )。

// 混入文件：name-mixin.js
export default {
  data() {
    return {
      name: genRandomName() // 假如它能生成随机的名字
    }
  },
  methods: {
    setName(name) {
      this.name = name
    }
  }
}

// 组件：my-component.vue