如何在项目中定义和使用hooks函数?

1、hooks就是钩子的意思

2、你可以将它想象成用来触发的一种工具

3、hooks是一个独立的文件

4、hooks的逻辑是可复用的,可以想象成是函数的封装

5、hooks可以封装数据和变量

5、hooks的文件名以及函数名以use开头,例如:useTheme.js / useTheme()

封装函数

在项目中经常碰到相同逻辑的功能,有的同学可能会将该功能封装成函数,单独放到utils或者某js文件中,在相同逻辑的地方复用。这种复用的意识其实就是hooks的一种。这里举一个正常函数封装的例子:

javascript 复制代码
// @/utils.js
// 数组去重
  export const arrSet = (v) => {
     return [...new Set(v)]
  }

// 页面
import { arrSet } from "@/utils.js"
// 使用
const getList = () => {
  let arr = [3,4,5,3,7,5,8]
  arr = arrSet(arr); // 使用函数
}

正常的引入import引入对应的函数,你可能在一个页面引入多个工具函数,例如:

javascript 复制代码
import { arrSet, arrObjSet, somethingSet } from "@/utils.js"

hooks其实也是类似的形式,只不过是封装成函数的形式:useTheme()的形式将工具函数解构出来 这里我来展示如何封装hooks

javascript 复制代码
// useTheme.js
export const useTheme = () => {
  
  // 数组去重
  const arrSet = (v) => {
     return [...new Set(v)]
  }

  // 数组对象去重
  const arrObjSet = (v) => {
     return [...new Set(v.map(el=> JSON.stringify(el)))].map(el=> JSON.parse(el))
  }

  // 其它函数...

  return {
    arrSet,
    arrObjSet
    // 其它函数...
  }
}

页面使用:

javascript 复制代码
import { useTheme } from "@/hooks/useTheme.js 

// 使用
const getList = () => {
  let { arrSet } = useTheme();
  let arr = [3,4,5,3,7,5,8]
  arr = arrSet(arr); // 使用函数
}

你可以看到,hooks其实就是函数封装的一种,只不过是另一种实现方式。

封装变量

你可以在hooks内部完成响应式数据封装,通过hooks复用数据,简化页面代码,这里我以vue3项目为例,完成hooks响应式变量的封装

javascript 复制代码
// useList.js
import { reactive, toRefs } from "vue";
export const useList = () => {
  
  const state = reactive({
    // 表格数据
    tableData: [],
    // 分页数据
    pageInfo: {
      // 当前页数
      pageNum: 1,
      // 每页显示条数
      pageSize: 10,
      // 总条数
      total: 0
    },
  });

  // 其它函数...

  return {
     ...toRefs(state),
    // 其它函数...
  }
}

页面使用:

javascript 复制代码
import { useList } from "@/hooks/useList.js 

const {tableData, pageInfo} = useList()
console.log(useList())

这里我用了toRefs将数据转换成响应且可解构的形式,并且用剩余运算符...将数据全部解构出来,在页面中就可以直接使用响应式数据

html 复制代码
<template>
  <div>{{pageInfo}}</div>
</template>

hooks在项目中的角色

过大的单文件是其实是不利于维护的,各种变量、函数混在一起,hooks就可以把它们全部抽出来,将碎片化的变量、函数封装起来,分区分块,你可以把hooks想象成一个钩子,要用的时候触发它,使用hooks就可实现高内聚、低耦合。

相关推荐
IT_陈寒2 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript