用Hook的方式实现防抖

需要进行页面防抖是前端编程时经常遇到的问题了。如果不太了解什么是防抖的话，可以参考浅谈 JS 防抖和节流。

这篇文章，我们分别用传统方式来实现防抖和用Hook方式实现防抖。

传统方式

const debounce = (func, delay) => {let timeoutreturn () => {if (timeout) {clearTimeout(timeout)}timeout = setTimeout(function() {func()}, delay)}
}
const log = debounce(() => console.log('call'), 5000)
log()
log()
log()

这是传统方式来实现防抖，核心原理就是每次都清除上一个定时器然后再添加新的定时器。所以，无论之前执行了多少次log()，实际只有最后一个log()生效。

Hook方式

使用Hook方式来实现防抖和传统方式背后思想是一样的，只不过是用Hook的方法来实现。下面我们来实现自定义Hook：

export const useDebounce = (value, delay) => {const [debounceValue, setDebounceValue] = useState(value)useEffect(() => {// 每次在value和delay变化以后都会设置一个新的定时器const timeout = setTimeout(() => setDebounceValue(value), delay)return () => clearTimeout(timeout)}, [value, delay])return debounceValue
}

使用的时候可以写成这样：

const debounceParam = useDebounce(param, 2000)

就自动获得延迟2s之后的数据

用Hook的方式实现防抖相关推荐

hook监控限制_**CodeIgniter通过hook的方式实现简单的权限控制
根据自己的实际情况,需要两个文件,一个是权限控制类,Acl,另外一个是权限配置的文件acl.php放在了config这个目录下. Acl这个类放在了application/hook/acl.php.通 ...
Windows桌面实现之八（DirectX HOOK 方式截取特殊的全屏程序之二）
by fanxiushu 2019-04-18 转载或引用请注明原始作者. 接上文. WIN7以上系统WDDM虚拟显卡开发(WDDM Filter/Hook Driver 显卡过滤驱动开发之一) 这篇 ...
HOOK 几种实现方式区别
Hook简介微软的MSDN中,对Hook的解释为: A hook is a point in the system message-handling mechanism where an appli ...
Hook 钩子技术及代码注入的 3 种方式
Hook 技术介绍 Hook 技术中文又叫作钩子技术,它就是在程序运行的过程中,对其中的某个方法进行重写, 在原有的方法前后加入我们自定义的代码.相当于在系统没有调用该函数之前,钩子程序就先捕获该消息 ...
（4.6.29.3）插件化之代码加载：启动Activity等四大组件之hook方式
文章目录一.代理模式和Hook原理 1.1 Hook 原理 1.2 代理模式二.Binder Hook 2.1 分析:系统服务的获取过程 2.2 寻找Hook点 2.3 hook Binder示例 ...
c语言延时函数_介召几个frida在安卓逆向中使用的脚本以及延时Hook手法
0x00 frida简介 frida是近几年才推出的一款全平台的逆向神器.功能上主要采用动态hook的方式,加入log,修改逻辑等.可以对java,native等hook. 具体使用情况,谁用谁知道. ...
hook修改信息_React系列二十一 Hook（二）高级使用
一. Hook高级使用 1.1. useReducer 很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是. useReducer仅仅是useState的一种替代方案: ...
Android 插件化原理学习 —— Hook 机制之动态代理
前言为了实现 App 的快速迭代更新,基于 H5 Hybrid 的解决方案有很多,由于 webview 本身的性能问题,也随之出现了很多基于 JS 引擎实现的原生渲染的方案,例如 React Nat ...
纯C#实现Hook功能
纯C#实现Hook功能发布一个自己写的用于Hook .Net方法的类库,代码量不大,完全的C#代码实现,是一个比较有趣的功能,分享出来希望能和大家共同探讨安装:Install-Package Do ...

用Hook的方式实现防抖

传统方式

Hook方式

用Hook的方式实现防抖相关推荐

最新文章

热门文章