扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容主要讲解“hooks有哪些特点”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“hooks有哪些特点”吧!
创新互联公司是一家专业提供新蔡企业网站建设,专注与做网站、网站建设、H5响应式网站、小程序制作等业务。10年已为新蔡众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
2019年年初，react 在 16.8.x 版本正式具备了 hooks 能力。
2019年6月，尤雨溪在 vue/github-issues 里提出了关于 vue3 Component API 的提案。（vue hooks的基础）
在后续的 react 和 vue3 相关版本中，相关 hooks 能力都开始被更多人所接受。
除此之外，solid.js、 preact 等框架，也是开始选择加入 hooks 大家庭。
可以预见，虽然目前仍然是 class Component 和 hooks api 并驾齐驱的场面，但未来几年里，hooks 极有可能取代 class Component 成为业内真正的主流。
hooks？年轻时你不懂我，就像后来我不懂
hooks。
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” 作为开头的方法呢？
通常来说，hooks 的命名都是以 use 作为开头，这个规范也包括了那么我们自定义的 hooks。
为什么？
因为（爱情 误）约定。
在 react 官方文档里，对 hooks 的定义和使用提出了 “一个假设、两个只在”核心指导思想。（播音腔）
一个假设：假设任何以 「use」 开头并紧跟着一个大写字母的函数就是一个 Hook。
第一个只在：只在 React 函数组件中调用 Hook，而不在普通函数中调用 Hook。（Eslint 通过判断一个方法是不是大坨峰命名来判断它是否是 React 函数）
第二个只在：只在最顶层使用 Hook，而不要在循环，条件或嵌套函数中调用 Hook。
因为是约定，因而 useXxx 的命名并非强制，你依然可以将你自定义的 hook 命名为 byXxx 或其他方式，但不推荐。
因为约定的力量在于：我们不用细看实现，也能通过命名来了解一个它是什么。
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{{ name }}
很明显，vue 组合式API里完成 useState 和 useMemo 相关工作的 API 并没有通过 useXxx 来命名，而是遵从了 Vue 一脉相承而来的 ref 和 computed。
虽然不符合 react Hook 定义的 Hook 约定，但 vue 的 api 不按照 react 的约定好像也并没有什么不妥。
hook除了官方提供的 Hooks Api, Hooks 的另外一个重要特质，就是可以自己进行“自定义 Hooks” 的定义，从而完成状态逻辑的复用。
开源社区也都有很多不错的基于 Hooks 的封装，比如 ahooks (ahooks.js.org/zh-CN/)，又比如 vueuse（vueuse.org/）
那么，我们应该怎么开始撰写 “自定义Hooks” 呢？往下看吧！
5.1 react 玩家看这里
react 官方网站就专门有一个章节讲述“自定义Hook”。（https://react.docschina.org/docs/hooks-custom.html）
这里，我们扔用文章开头那个 useName 的需求为例，希望达到效果：
const { name, setName } = useName();
// 随机生成一个状态属性 name，它有一个随机名作为初始值
// 并且提供了一个可随时更新该值的方法 setName如果我们要实现上面效果，我们该怎么写代码呢？
import React from 'react';
export const useName = () => {
// 这个 useMemo 很关键
const randomName = React.useMemo(() => genRandomName(), []);
const [ name, setName ] = React.useState(randomName)
return {
name,
setName
}
}忍不住要再次感叹一次，和 mixins 相比，它不仅使用起来更棒，就连定义起来也那么简单。
可能有朋友会好奇，为什么不直接这样写：
const [ name, setName ] = React.useState(genRandomName())
因为这样写是不对的，每次使用该 Hook 的函数组件被渲染一次时，genRandom() 方法就会被执行一次，虽然不影响 name 的值，但存在性能消耗，甚至产生其他 bug。
为此，我写了一个能复现错误的demo，有兴趣的朋友可以点开验证：https://codesandbox.io/s/long-cherry-kzcbqr
2022-02-03日补充更正：经掘友提醒，可以通过 React.useState(() => randomName()) 传参来避免重复执行，这样就不需要 useMemo 了，感谢！
5.2 vue 玩家看这里
vue3 官网没有关于 自定义Hook 的玩法介绍，但实践起来也并不困难。
目标也定位实现一个 useName 方法：
import { ref } from 'vue';
export const useName = () => {
const name = ref(genRandomName())
const setName = (v) => {
name.value = v
}
return {
name,
setName
}
}5.3 vue 和 react 自定义 Hook 的异同
相似点： 总体思路是一致的 都遵照着 "定义状态数据"，"操作状态数据"，"隐藏细节" 作为核心思路。
差异点： 组合式API 和 React函数组件 有着本质差异vue3 的组件里， setup 是作为一个早于 “created” 的生命周期存在的，无论如何，在一个组件的渲染过程中只会进入一次。React函数组件 则完全不同，如果没有被 memorized，它们可能会被不停地触发，不停地进入并执行方法，因此需要开销的心智相比于vue其实是更多的。
到此，相信大家对“hooks有哪些特点”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网