云栖号资讯：【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！

---

防抖是前端业务常用的工具函数，也是前端面试的高频问题。平时面试候选人，手写防抖人人都会，但是稍做修改就有小伙伴进坑送命。本文介绍了如何在react hooks中实现防抖。

背景

防抖（debounce）是前端经常用到的一个工具函数，也是我在面试中必问的一个问题。团队内部推广React hooks以后，我在面试中也加入了相关的题目。如何实现一个useDebounce这个看起来很基础的问题，实际操作起来却让很多背代码的小伙伴漏出马脚。
问题的安排往往是这样的：

1.什么是防抖、节流，分别解释一下？

2.在白纸上手写一个防抖or节流函数，自己任选（限时4分钟）

3.react hooks有了解吗？上机实现一个useDebounce、useThrottle

4.tyepscript有了解吗？用ts再来写一遍

5.……

围绕一个主题不断切换考察点，这样一轮下来，轻松又流畅，同时可以试探出很多信息。

实际情况是，很多候选人在第3题就卡住了，不得不说很可惜。

场景还原

写一个防抖函数

一个经典的防抖函数可能是这样的：

改成react hooks

先提供测试用例：

很多小伙伴会想当然的就改成这样：

简单、优雅，还复用了刚才的代码，测试一下，看起来并没有什么问题：

但是这个代码如果放上生产环境，你会被用户锤死。

真的吗？

换个用例来试一下：

当引入一个自动累加counter2就开始出问题了。这时很多候选人就开始懵了，有的候选人会尝试分析原因。只有深刻理解react hooks在重渲染时的工作原理才能快速定位到问题（事实上出错不要紧，能够快速定位问题的小伙伴才是我们苦苦寻找的）。

有的候选人开启胡乱调试大法，慌忙修改

当然结果依然错误，而且暴漏了自己对react hooks特性不够熟悉的问题……

有的候选人猜到是重渲染缓存的问题，于是写成这样：

在配合setCounter1(x => x + 1)修改的情况下，可以得到正确的结果。但并没有正确解决问题。依然是错误的。有兴趣的读者可以复现一下这个现象，思考一下为什么，欢迎留言讨论。

问题出在哪里？

控制台开始疯狂的输出log。看到这里，很多读者就明白了。如果是前面表现稍好的候选人，我可以提示到此。

每次组件重新渲染，都会执行一遍所有的hooks，这样debounce高阶函数里面的timer就不能起到缓存的作用（每次重渲染都被置空）。timer不可靠，debounce的核心就被破坏了。

如何调整？

修复这个问题可以有很多办法。比如利用React组件的缓存机制：

就可以实现一个可靠的useDebounce。

同理我们直接给出useThrottle的代码：

最后

使用react hooks可以帮助我们把一些常用的状态逻辑沉淀下来。同时，react hooks引入生产项目的初期要格外留意写法和原理的差异所带来的隐患。不然就跟上面的候选人一样大意失荆州……

分析一下这道题易错的原因：

• 马虎大意。debounce很简单，react hooks也不难，万万没想到结合起来就有坑
• 心态崩坏。面试场景下，遇到没有见过的问题，无法冷静分析。
• 对react hooks理解不够深刻，踩坑不多
• 对debounce也不是足够熟悉，有背代码的嫌疑

由于太多人挂在这个问题上，我决定把它分享出来，希望可以帮到大家。

【云栖号在线课堂】每天都有产品技术专家分享！
课程地址：https://yqh.aliyun.com/live

立即加入社群，与专家面对面，及时了解课程最新动态！
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间：2020-04-23
本文作者：helo程序员
本文来自：“掘金”，了解相关信息可以关注“掘金”