为什么 vue和 react 都选择了hooks？

一、初步了解hooks

2019年年初，react 在 16.8.x 版本正式具备了 hooks 能力。
2019年6月，尤雨溪在 vue/github-issues 里提出了关于 vue3 Component API 的提案。（vue hooks的基础）
虽然现在是class component 和 hooks api同时存在，但是在未来，hooks 极有可能取代 class Component 成为业内主流。

二、什么是hooks?

hooks的定义
“hooks” 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：系统运行到某一时期时，会调用被注册到该时机的回调函数。
比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。
以上这些，都可以被称一声 “hook”。
一系列以 “use” 作为开头的方法，它们提供了让你可以完全避开 class式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。
一系列方法，提供了在函数式组件中完成开发工作的能力。

命名规范和指导思想
通常来说，hooks 的命名都是以 use 作为开头，这个规范也包括了那么我们自定义的 hooks。
一个假设： 假设任何以 「use」 开头并紧跟着一个大写字母的函数就是一个 Hook。
第一个只在： 只在 React 函数组件中调用 Hook，而不在普通函数中调用 Hook。（Eslint 通过判断一个方法是不是大坨峰命名来判断它是否是 React 函数）
第二个只在： 只在最顶层使用 Hook，而不要在循环，条件或嵌套函数中调用 Hook。

三、为什么使用hooks？

1、更好的状态复用
当组件实例创建时，需要创建一个 state 属性：name，并随机给此 name 属性附一个初始值。除此之外，还得提供一个 setName 方法。你可以在组件其他地方开销和修改此状态属性。
更重要的是: 这个逻辑要可以复用，在各种业务组件里复用这个逻辑。
2、Hook 的状态复用写法：

// 单个name的写法
const {
    name, setName } = useName();

// 梅开二度的写法
const {
    name : firstName, setName : setFirstName } = useName(
1
2
3
4
5
6