前端造轮子神器 —— Hooks

本文目录

• • 一、什么是Hooks?
  • 二、使用场景
  • 三、Hooks和普通函数封装调用的区别？
  • 四、Hooks的优/缺点
  • • 优点
    • 缺点
    • 五、vue3中Hooks实现原理
    • 六、示例
    • • 1、追踪鼠标位置（vue3）
      • 2、强制更新组件（React）

        一、什么是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 }
              }
              

              使用示例：

              import { useMouse } from './mouse.js'
              const { x, y } = useMouse()
              
              Mouse position: {{ x }}, {{ y }}
              

              推荐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 (
                  
              
                    handleClick}强制更新
                  
                );
              }
              export default MyComponent;