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

Hooks是什么

"hooks" 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：系统运行到某一时期时，会调用被注册到该时机的回调函数。

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

假设有如下需求：

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

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

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

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

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

// 组件：my-component.vue