vue和react中使用Hooks的优势


vue和react中使用Hooks的优势

文章插图
 
接下来我们来一起了解 。
  1. 初步了解 Hooks 在 vue 与 react 的现状
  2. 听一听本文作者关于 Hooks 的定义和总结
  3. 弄懂“为什么我们需要 Hooks”
  4. 进行一些简单的 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 大家庭 。
vue和react中使用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的优势

文章插图
 
如果按这个标准来看的话,vue 和 react 中 hooks 的定义,似乎都差不多 。
那么为什么要提到是以 “use” 作为开头的方法呢?
2.2 命名规范 和 指导思想
通常来说,hooks 的命名都是以 use 作为开头,这个规范也包括了那么我们自定义的 hooks 。
为什么?
因为 (爱情 误) 约定 。
在 react 官方文档里,对 hooks 的定义和使用提出了 “一个假设、两个只在” 核心指导思想 。(播音腔)
vue和react中使用Hooks的优势

文章插图
 
一个假设: 假设任何以 「use」 开头并紧跟着一个大写字母的函数就是一个 Hook 。
第一个只在: 只在 React 函数组件中调用 Hook,而不在普通函数中调用 Hook 。(Eslint 通过判断一个方法是不是大坨峰命名来判断它是否是 React 函数)


推荐阅读