vue和react中使用Hooks的优势( 四 ) _Hooks

虽然不符合 react Hook 定义的 Hook 约定，但 vue 的 api 不按照 react 的约定好像也并没有什么不妥。
参考网址：
https://v3.cn.vuejs.org/api/composition-api.html
五、开始第一个自定义 hook
除了官方提供的 Hooks Api, Hooks 的另外一个重要特质，就是可以自己进行“自定义 Hooks” 的定义，从而完成状态逻辑的复用。
开源社区也都有很多不错的基于 Hooks 的封装，比如 ahooks (
https://ahooks.js.org/zh-CN/)，又比如 vueuse（https://vueuse.org/）
我还专门写过一篇小文章介绍 vuehook:【一库】vueuse:我不许身为vuer,你的工具集只有lodash! 。

文章插图

那么，我们应该怎么开始撰写 “自定义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 = https://www.isolves.com/it/cxkf/qd/2022-03-28/v}return {name,setName}}

5.3 vue 和 react 自定义 Hook 的异同

相似点：总体思路是一致的都遵照着 "定义状态数据"，"操作状态数据"，"隐藏细节" 作为核心思路。
差异点：组合式API 和 React函数组件有着本质差异vue3 的组件里， setup 是作为一个早于 “created” 的生命周期存在的，无论如何，在一个组件的渲染过程中只会进入一次。React函数组件则完全不同，如果没有被 memorized，它们可能会被不停地触发，不停地进入并执行方法，因此需要开销的心智相比于vue其实是更多的。

本文转载于掘金，谢谢，大家一起学习…！
…https://juejin.cn/post/7066951709678895141?share_token=fe63ed48-8486-473a-a1a2-88b14fe41e4a