hooks有哪些特点
本篇内容主要讲解“hooks有哪些特点”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“hooks有哪些特点”吧!
创新互联公司是一家专业提供新蔡企业网站建设,专注与做网站、网站建设、H5响应式网站、小程序制作等业务。10年已为新蔡众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
一、hooks: 什么叫大势所趋？
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。
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 或其他方式，但不推荐。
因为约定的力量在于：我们不用细看实现，也能通过命名来了解一个它是什么。
三、为什么我们需要 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有哪些特点”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
网页名称：hooks有哪些特点
本文URL：http://scyanting.com/article/jhsodp.html
