Hooks封装与使用示例详解

目录
  • Hooks是什么?
    • Hooks解决了什么?
    • HOC与HOOK对比
    • 分别使用React与Vue3两种框架封装useThrottle钩子函数
  • 总结

Hooks是什么?

本篇文章主要介绍Hooks如何在React与Vue3两大框架中封装使用。

Hooks就是当代码执行在某个执行阶段,触发被钩子钩到的事件函数或者回调函数,Hooks的概念最早在React的V16.8.0版本正式推出,后面Vue3的出现也引入Hooks的概念,两者使用Hooks还是会有所差异。

Hooks解决了什么?

  • 完善代码能力
  • 组件逻辑复用

HOC与HOOK对比

HOC概念:hoc是React中用于重用组件逻辑的一种高级技术实现模式,它本身是一个函数,接受一个组件并返回一个新的组件

  • HOC
function Hocomponent(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }
    render() {
      // ... 并使用新数据渲染被包装的组件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };

上边的例子可以看出高阶组件内部返回了一个类组件,通过这个类组件对WrappedComponent进行包装,在返回得到一个全新的组件。但是HOC的缺点就是props可能会被覆盖,而且容易产生嵌套地域。

  • Hooks

react-Hooks的出现主要弥补函数组件无状态无生命周期问题等,主要应对class复杂组件变的难以理解,逻辑混乱,不易拆解和测试与嵌套地域问题。

分别使用React与Vue3两种框架封装useThrottle钩子函数

  • React实现节流Hooks
import { useState, useCallback } from "react";
export function useThrottleFn(fn, time) {
    let [isTimer,setIsTimer] = useState<any>(null);
    const clear = () => {
        clearTimeout(isTimer);
        setIsTimer(null)
    }
    let throttle = useCallback(()=>{
        if (!isTimer) {
            setIsTimer(setTimeout(() => {
                fn()
                clear()
            }, time))
        }
    },[fn, time])
    return [throttle]
}
// 引入使用
  const [throttle] = useThrottleFn((e)=>{
        console.log(e)
    },500)
    const Ceshi  = ()=>{
        let e = 'Hooks'
        throttle(e);
    }

React内部也存在很多的Hooks钩子,常用的钩子:

useState,useMemo,useCallback,useRef,useContext,但是这些钩子必须在函数组件中使用并且在函数组件中使用钩子需要在组件顶层调用,不能在Class中使用。这样一来让我们可以挥手告别this.xxx的时代。

  • Vue3实现节流Hooks
import { ref, unref, watch } from 'vue';
import { useTimeouts } from './useTimeout';
/**
 *
 * @param fn 回调函数
 * @param wait 延迟时间
 * @returns
 */
export function useThrottleFn(fn, wait = 80) {
  if (typeof fn !== 'function') {
    return;
  }
  let Timer: any = null;
  const isReady = ref<Boolean>(false);
  const clearun = () => {
    Timer && clearTimeout(Timer);
  };
  // 闭包实现节流封装
  return function () {
    const _this = this;
    const args = arguments;
    // 更改状态触发watch监听,触发回调函数fn
    const startFun = function () {
      isReady.value = true;
    };
    // 这里利用watch监听isReady的状态变化执行回到函数,而不是直接将回调函数放在定时器中
    watch(
      () => unref(isReady),
      () => {
        if (unref(isReady) && Timer) {
          fn.apply(_this, args);
          isReady.value = false;
          Timer = null;
          clearun();
        }
      },
    );
    // Timer 如果不存在就开始执行
    if (!Timer) {
      Timer = setTimeout(startFun, wait);
    }
  };
}
// 引入使用
const Ceshi = useThrottleFn(()=>{
      console.log('Hooks')
},300)

Vue3的发布随之带来了很多新特性比如从选项式API到组合式API,引入Hooks等。那这里在介绍一个新的工具库Vueuse,Vueuse 基于Vue-demi封装了大量的钩子工具函数,比如useDark,useToggle其他点击Vueuse文档查看更多,并且在Vue2与Vue3都可以使用。当然我们也可以自己自定义按需求封装Hooks,但在Vue3中使用Hooks需要在setup中使用,由setup作为组合式API的入口点,在Vue2使用需要安装VueCompositionApi进行使用。

总结

React Hooks不能在循环与嵌套函数中使用,Vue3可以在嵌套中使用,所以这两框架的使用或封装方式是不同的,但是百变不离其宗,两种钩子的本质是没有变化的,以上就是Hooks封装与使用示例详解的详细内容,更多关于Hooks封装使用的资料请关注我们其它相关文章!

(0)

相关推荐

  • 公共Hooks封装文件下载useDownloadFile实例详解

    目录 引言 项目环境 封装前提:各方法对比 封装分解:下载核心代码 封装分解:用户体验设计 useDownloadFile.js完整代码 引言 对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的Hooks. 本篇文章为useDownloadFile.js 基于个人项目环境进行封装的Hooks,仅以本文介绍封装Hooks思想心得,故相关代码可能不适用他人 项目环境 Vue3.x + Ant Design Vue3.x +

  • ahooks useVirtualList 封装虚拟滚动列表

    目录 简介 实现原理 具体实现 思考总结 简介 提供虚拟化列表能力的 Hook,用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题. 详情可见官网,文章源代码可以点击这里. 实现原理 其实现原理监听外部容器的 scroll 事件以及其 size 发生变化的时候,触发计算逻辑算出内部容器的高度和 marginTop 值. 具体实现 其监听滚动逻辑如下: // 当外部容器的 size 发生变化的时候,触发计算逻辑 useEffect(() => { if (!size?.width || !siz

  • 公共Hooks封装useTableData表格数据实例

    目录 写在前面 项目环境 封装分解:声明变量 封装分解:请求接口 封装分解:筛选查询 及重置查询 封装分解:获取分页器配置 封装分解:表格change事件(分页.排序.筛选变化触发) useTableData.js完整代码 实际使用示例 写在前面 对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的Hooks.本篇文章为useTableData.js 基于个人项目环境进行封装的Hooks,仅以本文介绍封装Hooks思想心

  • 业务层hooks封装useSessionStorage实例详解

    目录 封装原因: 建议: 工具库封装模式: 工具库目录: API设计: 代码实践: Hooks设计方式 useSessionStorage.js 简介: 注意点 Api Params Options Result 总结: 封装原因: 名称:useSessionStorage 功能开发过程中,需要进行数据的临时存储,正常情况下,使用localStorage或者 sessionStorage,存在于 window 对象中,使用场景不一样. sessionStorage的生命周期是在浏览器关闭前,浏览

  • 公共Hooks封装报表导出useExportExcel实现详解

    目录 写在前面 项目环境 封装思考:报表数据来源 封装分解:前端生成报表 前端生成报表方法Sheet.js 封装分解:后端接口返回数据导出优化 useExportExcel.js完整代码 写在前面 对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的Hooks. 本篇文章为useExportExcel.js 基于个人项目环境进行封装的Hooks,仅以本文介绍封装Hooks思想心得,故相关代码可能不适用他人 项目环境 Vu

  • ahooks封装cookie localStorage sessionStorage方法

    目录 引言 cookie localStorage/sessionStorage 总结与归纳 引言 本文是深入浅出 ahooks 源码系列文章的第九篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 今天来看看 ahooks 是怎么封装 cookie/localStorage/sessionStorage 的. cookie ah

  • Hooks封装与使用示例详解

    目录 Hooks是什么? Hooks解决了什么? HOC与HOOK对比 分别使用React与Vue3两种框架封装useThrottle钩子函数 总结 Hooks是什么? 本篇文章主要介绍Hooks如何在React与Vue3两大框架中封装使用. Hooks就是当代码执行在某个执行阶段,触发被钩子钩到的事件函数或者回调函数,Hooks的概念最早在React的V16.8.0版本正式推出,后面Vue3的出现也引入Hooks的概念,两者使用Hooks还是会有所差异. Hooks解决了什么? 完善代码能力

  • Vue3 Hooks 模块化抽离示例详解

    目录 正文 todoList demo 目录结构 TodoList.vue代码如下 定义的类型文件 逻辑抽离 正文 Vue3中的Hooks 其实就是业务逻辑的抽离,跟Vue2中mixin 本质上是一样的:将当前组件的业务逻辑抽离到一个公共的文件中,提高逻辑复用性,让当前组件看起来更加清爽,不太一样的地方是我们封装hooks 的时候一般是返回一个函数. todoList demo 先来看一个简单的例子:todoList demo. 新建一个Vue3+Ts的项目: npm init vite@lat

  • Vue业务组件封装Table表格示例详解

    目录 前言 Table组件介绍 Table组件封装思路 了解element Table组件代码 Table组件如何去封装 新建LTable组件 配置文件 配置插槽 动态组件 解决插槽存在的问题 代码实现 总结 前言 这个系列主要是分享自己在工作中常用到的业务组件,以及如何对这些组件进行有效的封装和封装的思路.注:都是基于element ui进行二次封装. 封装组件的基本方法就是通过props和emit进行父子组件的传值和通信.利用插槽.组件等去增加组件的可扩展性和复用性. Table组件介绍 用

  • angularJS 指令封装回到顶部示例详解

    关于angularJS如何回到顶部,还是直接code吧! 1.构建指令,使用registerDirective构建指令添加到内部的hasDirectives对象内,以方便后面在全局查找指令的时候进行匹配. /** **回到顶部 **/ define(["app"], function (app) { app().registerDirective("backToTop", function () { return { restrict: "E",

  • vue封装动态表格方式详解

    目录 前言 实现方式简述 表格实现: func组件 text组件: 调用示例 效果 前言 这里只是提供一种想法并提供一些快速实现,实际这些技巧可以用在很多地方,如:动态表单 实现方式简述 通过json定义要显示的列 通过slot实现自定义列 通过require.context实现组件的自动注册,并通过<components is="xxx"></components>, 调用动态注册的组件 优点: 支持通过slot自定义扩展 支持编写vue文件扩展列的显示方式

  • fetch网络请求封装示例详解

    export default ({ url, method = 'GET', data = null, }) => { // 请求配置 let options = { method } // data不为空时,它就是post请求 if (data) { options = { ...options, body: JSON.stringify(data), headers: { 'content-type': 'application/json' } } } return fetch(url, o

  • JavaScript函数封装的示例详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,

  • iOS封装倒计时按钮HLCountDownButton示例详解

    目录 引言 演示图 可选自定义属性 3种样式选择 回调说明 全局样式设置 引言 在开发中经常会用到倒计时的按钮,常用在发送短信验证码中.最差的写法是把代码写在ViewController中.这样的话如果项目中存在多个倒计时按钮,代码就十分臃肿了.所以封装一个倒计时按钮就迫在眉睫了.传送门HLCountDownButton,欢迎帮忙点点小星星 支持过xib.storyboard自定义样式 支持切换前后台计时准确 多种样式切换 支持CocoaPods导入pod "HLCountDownButton&

  • epoll封装reactor原理剖析示例详解

    目录 reactor是什么? reactor模型三个重要组件与流程分析 组件 流程 将epoll封装成reactor事件驱动 封装每一个连接sockfd变成ntyevent 封装epfd和ntyevent变成ntyreactor 封装读.写.接收连接等事件对应的操作变成callback 给每个客户端的ntyevent设置属性 将ntyevent加入到epoll中由内核监听 将ntyevent从epoll中去除 读事件回调函数 写事件回调函数 接受新连接事件回调函数 reactor运行 react

随机推荐