hooks怎么样，为什么vue和react都选择它！

本篇文章我们来了解下hooks，聊聊为什么vue和react都选择它，为什么我们需要 hooks ，以及vue 和 react 自定义 hook 的异同，希望对大家有所帮助！

阅读本文，你将:

• 初步了解 Hooks 在 vue 与 react 的现状

• 听一听本文作者关于 Hooks 的定义和总结

• 弄懂“为什么我们需要 Hooks”

  立即学习“前端免费学习笔记（深入）”；

• 进行一些简单的 Hooks 实践

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

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

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

在后续的 react 和 vue3 相关版本中，相关 hooks 能力都开始被更多人所接受。【相关推荐：vuejs视频教程】

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

可以预见，虽然目前仍然是 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式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。

简化一下：

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

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

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 等等）。

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

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

2.2 命名规范 和 指导思想

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

为什么？

因为（爱情 误）约定。

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

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

第一个只在： 只在 React 函数组件中调用 Hook，而不在普通函数中调用 Hook。（Eslint 通过判断一个方法是不是大坨峰命名来判断它是否是 React 函数）

第二个只在： 只在最顶层使用 Hook，而不要在循环，条件或嵌套函数中调用 Hook。

因为是约定，因而 useXxx 的命名并非强制，你依然可以将你自定义的 hook 命名为 byXxx 或其他方式，但不推荐。

因为约定的力量在于：我们不用细看实现，也能通过命名来了解一个它是什么。

以上 “一个假设、两个只在” 总结自 react 官网：

• https://zh-hans.reactjs.org/docs/hooks-rules.html
  

• 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 写法 ）

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

// 组件：my-component.vue