--- highlight: monokai theme: Chinese-red --- 「**2022 年什么会火？什么该学？本文正在参与[“聊聊 2022 技术趋势”](https://juejin.cn/post/7049621519219195918 "https://juejin.cn/post/7049621519219195918")征文活动** 」 ## 📖阅读本文，你将: 1. 初步了解 `Hooks` 在 `vue` 与 `react` 的现状 2. 听一听本文作者关于 `Hooks` 的定义和总结 3. 弄懂“为什么我们需要 `Hooks`” 4. 进行一些简单的 `Hooks` 实践 ## 一、hooks: 什么叫大势所趋？ 2019年年初，`react` 在 `16.8.x` 版本正式具备了 `hooks` 能力。 2019年6月，尤雨溪在 [vue/github-issues](https://github.com/vuejs/rfcs/pull/42) 里提出了关于 `vue3 Component API` 的提案。（vue hooks的基础）在后续的 `react` 和 `vue3` 相关版本中，相关 `hooks` 能力都开始被更多人所接受。除此之外，`solid.js`、 `preact` 等框架，也是开始选择加入 `hooks` 大家庭。 ![libs](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b3514ceea4546929ee96b0f21832738~tplv-k3u1fbpfcp-zoom-1.image) 可以预见，虽然目前仍然是 `class Component` 和 `hooks api` 并驾齐驱的场面，但未来几年里，`hooks` 极有可能取代 `class Component` 成为业内真正的主流。 ## 二、什么是 `hooks`？ > 年轻时你不懂我，就像后来我不懂 `hooks`😭。 ### 2.1 `hooks` 的定义 "hooks" 直译是 “钩子”，它并不仅是 `react`，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指： > 系统运行到某一时期时，会调用被注册到该时机的回调函数。比较常见的钩子有：`windows` 系统的钩子能监听到系统的各种事件，浏览器提供的 `onload` 或 `addEventListener` 能注册在浏览器各种时机被调用的方法。以上这些，都可以被称一声 "hook"。但是很显然，在特定领域的特定话题下，`hooks` 这个词被赋予了一些特殊的含义。在 `react@16.x` 之前，当我们谈论 `hooks` 时，我们可能谈论的是“组件的生命周期”。但是现在，`hooks` 则有了全新的含义。以 `react` 为例，`hooks` 是： > 一系列以 `“use”` 作为开头的方法，它们提供了让你可以完全避开 `class式写法`，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。简化一下： > 一系列方法，提供了在函数式组件中完成开发工作的能力。（记住这个关键词: **函数式组件**） ```js import { useState, useEffect, useCallback } from 'react'; // 比如以上这几个方法，就是最为典型的 Hooks ``` 而在 `vue` 中， `hooks` 的定义可能更模糊，姑且总结一下： > 在 `vue` 组合式API里，以 `“use”` 作为开头的，一系列提供了组件复用、状态管理等开发能力的方法。（关键词：**组合式API**） ```js import { useSlots, useAttrs } from 'vue'; import { useRouter } from 'vue-router'; // 以上这些方法，也是 vue3 中相关的 Hook！ ```` 如：`useSlots`、 `useAttrs`、 `useRouter` 等。但主观来说，我认为`vue` 组合式API其本身就是“vue hooks”的关键一环，起到了 `react hooks`里对生命周期、状态管理的核心作用。（如 `onMounted`、 `ref` 等等）。 ![hooks 环境](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3919caf747174395b5b285065d9df8fb~tplv-k3u1fbpfcp-zoom-1.image) 如果按这个标准来看的话，`vue` 和 `react` 中 `hooks` 的定义，似乎都差不多。那么为什么要提到是以 `“use”` 作为开头的方法呢？ ### 2.2 命名规范和指导思想通常来说，`hooks` 的命名都是以 `use` 作为开头，这个规范也包括了那么我们自定义的 `hooks`。为什么？因为 ~~（爱情误）~~ 约定。在 `react` 官方文档里，对 `hooks` 的定义和使用提出了 **“一个假设、两个只在”** 核心指导思想。~~（播音腔）~~ ![一个假设，两个只在](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f77099ca11334313bdb616d6389b1750~tplv-k3u1fbpfcp-zoom-1.image) **一个假设：** 假设任何以「`use`」开头并紧跟着一个大写字母的函数就是一个 `Hook`。 **第一个只在：** 只在 `React` 函数组件中调用 `Hook`，而不在普通函数中调用 `Hook`。（`Eslint` 通过判断一个方法是不是大坨峰命名来判断它是否是 `React` 函数） **第二个只在：** 只在最顶层使用 `Hook`，而不要在循环，条件或嵌套函数中调用 Hook。因为是约定，因而 `useXxx` 的命名并非强制，你依然可以将你自定义的 `hook` 命名为 `byXxx` 或其他方式，但不推荐。因为约定的力量在于：我们不用细看实现，也能通过命名来了解一个它是什么。以上 **“一个假设、两个只在”** 总结自 `react` 官网： 1. [https://zh-hans.reactjs.org/docs/hooks-rules.html](https://zh-hans.reactjs.org/docs/hooks-rules.html) 2. [https://zh-hans.reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce](https://zh-hans.reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce) ## 三、为什么我们需要 `hooks` ? ### 3.1 更好的状态复用 > 怼的就是你，`mixin` ！在 `class` 组件模式下，状态逻辑的复用是一件困难的事情。假设有如下需求： > 当组件实例创建时，需要创建一个 `state` 属性：`name`，并随机给此 `name` 属性附一个初始值。除此之外，还得提供一个 `setName` 方法。你可以在组件其他地方开销和修改此状态属性。 > 更重要的是: 这个逻辑要可以复用，在各种业务组件里复用这个逻辑。在拥有 `Hooks` 之前，我首先会想到的解决方案一定是 `mixin`。代码如下：（此示例采用 `vue2 mixin` 写法） ```js // 混入文件：name-mixin.js export default { data() { return { name: genRandomName() // 假装它能生成随机的名字 } }, methods: { setName(name) { this.name = name } } } ``` ```jsx // 组件：my-component.vue