Hooks封装与使用示例详解
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封装使用的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7075225400061722655
相关文章
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 在本篇内容里小编给大家分享的是关于c#使用封装方法以及相关知识点,对此有需要的朋友们可以学习下。...2020-06-25
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
- 这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 这篇文章主要介绍了Vue封装全局过滤器Filters的步骤,通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下...2020-09-16
- 这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2020-09-05
- 这篇文章主要介绍了Mybatis返回结果封装map过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 这篇文章主要介绍了如何通过Proxy实现JSBridge模块化封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-23
- 这篇文章主要介绍了WebService 的简单封装接口调用方法,主要是通过简单的sql语句来查询数据库,从而返回dataset,十分简单实用,有需要的小伙伴可以参考下。...2020-06-25
- 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于Vue封装全局toast组件,需要的朋友可以参考下...2021-07-13
- 这篇文章主要给大家介绍了关于利用unity代码C#封装为dll的相关资料,文中通过图文将实现的方法介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了vue 封装面包屑组件教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
- 这篇文章主要介绍了JavaScript中的封装与继承特性,封装与继承是基于对象编程概念中的基本特性,需要的朋友可以参考下...2016-03-22
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要为大家详细介绍了原生js实现对Ajax的封装,模仿jquery,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-26
- 这篇文章主要介绍了React Hooks常用场景的使用,根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性,感兴趣的可以了解一下...2021-04-13
- 这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下...2016-01-12
- 这篇文章主要介绍了如何使用React Hooks请求数据并渲染,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-18