浅谈：为什么vue和react都选择了Hooks?

一、hooks: 什么叫大势所趋？

2019年年初，react 在 16.8.x 版本正式具备了 hooks 能力。

2019年6月，尤雨溪在 vue/github-issues 里提出了关于 vue3 Component API 的提案。（vue hooks的基础）

在后续的 react 和 vue3 相关版本中，相关 hooks 能力都开始被更多人所接受。

除此之外，solid.js、 preact 等框架，也是开始选择加入 hooks 大家庭。

libs

可以预见，虽然目前仍然是 class Component 和 hooks api 并驾齐驱的场面，但未来几年里，hooks 极有可能取代 class Component 成为业内真正的主流。

二、什么是 hooks？

年轻时你不懂我，就像后来我不懂 hooks。

2.1 hooks 的定义

“hooks” 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：

系统运行到某一时期时，会调用被注册到该时机的回调函数。

比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。

以上这些，都可以被称一声 “hook”。

但是很显然，在特定领域的特定话题下，hooks 这个词被赋予了一些特殊的含义。

在 [email protected] 之前，当我们谈论 hooks 时，我们可能谈论的是“组件的生命周期”。

但是现在，hooks 则有了全新的含义。

以 react 为例，hooks 是：

一系列以 “use” 作为开头的方法，它们提供了让你可以完全避开 class式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。

简化一下：

一系列方法，提供了在函数式组件中完成开发工作的能力。

（记住这个关键词: 函数式组件）

import { useState, useEffect, useCallback } from 'react';
// 比如以上这几个方法，就是最为典型的 Hooks

而在 vue 中， hooks 的定义可能更模糊，姑且总结一下：

在 vue 组合式API里，以 “use” 作为开头的，一系列提供了组件复用、状态管理等开发能力的方法。

（关键词：组合式API）

import { useSlots, useAttrs } from 'vue';
import { useRouter } from 'vue-router';
// 以上这些方法，也是 vue3 中相关的 Hook！

如：useSlots、 useAttrs、 useRouter 等。

但主观来说，我认为vue 组合式API其本身就是“vue hooks”的关键一环，起到了 react hooks里对生命周期、状态管理的核心作用。（如 onMounted、 ref 等等）。

hooks 环境

如果按这个标准来看的话，vue 和 react 中 hooks 的定义，似乎都差不多。

那么为什么要提到是以 “use” 作为开头的方法呢？

2.2 命名规范 和 指导思想

通常来说，hooks 的命名都是以 use 作为开头，这个规范也包括了那么我们自定义的 hooks。

为什么？

因为 （爱情 误） 约定。

在 react 官方文档里，对 hooks 的定义和使用提出了 “一个假设、两个只在” 核心指导思想。（播音腔）

一个假设，两个只在

一个假设： 假设任何以 「use」 开头并紧跟着一个大写字母的函数就是一个 Hook。

第一个只在： 只在 React 函数组件中调用 Hook，而不在普通函数中调用