本文目录
一、什么是Hooks?
Hook
翻译过来是钩子的意思,其本质上是一组可复用的函数。
简单理解:能够在不同的组件中,实现相同的代码逻辑,以达到代码复用、提高维护性的效果。
二、使用场景
-
逻辑复用:当多个组件需要共享相同的逻辑时,可以将这些逻辑封装成一个Hook,然后在需要的组件中导入并使用。可以避免代码重复,提高代码的复用性。
-
逻辑拆分:对于复杂的组件,可以使用Hooks将组件的逻辑拆分成多个独立的函数,每个函数负责处理一部分逻辑。可以使组件的代码更加清晰、易于维护。
-
副作用管理:Hooks中的函数可以访问组件的响应式数据,并且可以在组件的生命周期中执行副作用操作(如定时器、事件监听等)。通过使用Hooks,可以更好地管理这些副作用操作,确保它们在组件卸载时得到正确的清理。
三、Hooks和普通函数封装调用的区别?
普通封装的工具函数等,大多数是"无状态"的,不能够建立数据与视图之间的联系。
这里的"有状态"是指是否含有响应式变量。基于MVC架构的React和基于MVVM架构的Vue,状态是特殊的js变量,是会引起视图变化的。而普通的变量并不会引起视图变化。当普通变量被注册为框架的状态时,就称之为响应式变量。
总结:如果一个函数包含了响应式变量,那么它就是一个Hook
函数。
四、Hooks的优/缺点
1)状态管理简化:比如useState
允许函数组件拥有自己的状态,使得代码更加简洁,无需转换为类组件。useReducer
提供了更复杂的管理状态的方式,类似于Redux的dispatch动作。
2)逻辑复用:自定义Hooks(如useCustomHook
)可以封装通用逻辑,避免代码重复,提高可复用性。
3)生命周期管理:useEffect
可以替代componentDidMount
, componentDidUpdate
, 和 componentWillUnmount
,将多个生命周期合并,代码更易读和维护。
4)更好的组织:逻辑不再局限于生命周期方法,可以根据功能组织代码,提高代码的可读性和可维护性。
5)减少嵌套:Hooks减少了对类组件和高阶组件(HOCs)的依赖,降低了组件的嵌套深度,减轻了“渲染地狱”。
6)更少的副作用:useMemo
和 useCallback
优化性能,避免不必要的计算和重新渲染。
7)更好的测试:Hooks通常更容易进行单元测试,因为它们是独立的纯函数。
1)学习曲线:Hooks是React的新概念,需要开发者额外学习,尤其是对于那些习惯了类组件的人来说。
2)代码可读性:如果不恰当使用,Hooks可能导致代码变得难以理解,尤其是当一个组件中使用多个Hooks时。
3)调试挑战:虽然React DevTools提供了对Hooks支持,但理解多个Hooks如何交互以及它们在不同渲染阶段的行为可能更具挑战性。
4)性能影响:比如不正确的使用useEffect
可能导致不必要的副作用执行,useMemo
和useCallback
的误用可能导致性能优化不当。
5)社区和库支持:当新特性出现时,第三方库可能需要时间来更新以支持Hooks,这可能会影响项目兼容性。
6)代码组织:需要良好的代码组织实践,以防止在组件中出现过多的逻辑,导致“Hook地狱”。
五、vue3中Hooks实现原理
核心:包含响应式变量,能够让组件实现代码复用的函数。
在vue3
中,Hooks
是基于Composition API
实现。Hooks
使用则是通过setup
函数,setup
是Vue3
组件中的一个新的生命周期函数,它在组件实例被创建之前调用,并且接收两个参数:props
和context
。在setup
函数中,可以定义和返回组件中需要使用的响应式数据、方法、计算属性等,而这些都可以通过Hooks
来实现。
六、示例
1、追踪鼠标位置(vue3)
import { ref, onMounted, onUnmounted } from 'vue'
// 按照惯例,组合式函数名以“use”开头
export function useMouse() {
// 被组合式函数封装和管理的状态
const x = ref(0)
const y = ref(0)
// 组合式函数可以随时更改其状态
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
// 一个组合式函数也可以挂靠在所属组件的生命周期上,来启动和卸载副作用
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
// 返回值暴露所管理的状态
return { x, y }
}
使用示例:
<script setup>
import { useMouse } from './mouse.js'
const { x, y } = useMouse()
</script>
<template>Mouse position: {{ x }}, {{ y }}</template>
推荐Vue3第三方Hooks库:VueUse中文文档
2、强制更新组件(React)
import { useState } from 'react'
function useForceUpdate() {
const [_, forceUpdate] = useState(0); // 任何值都可以,这里用0作为示例
return () => forceUpdate(count => count + 1); // 强制更新组件,通过改变状态值触发
}
调用示例:
import React from 'react';
import useForceUpdate from './useForceUpdate';
function MyComponent() {
const forceUpdate = useForceUpdate();
const handleClick = () => {
forceUpdate();
};
return (
<div>
<button onClick={handleClick}>强制更新</button>
</div>
);
}
export default MyComponent;