雲栖号資訊：【 點選檢視更多行業資訊】
在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！
防抖是前端業務常用的工具函數，也是前端面試的高頻問題。平時面試候選人，手寫防抖人人都會，但是稍做修改就有小夥伴進坑送命。本文介紹了如何在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程式員
本文來自：“
掘金”，了解相關資訊可以關注“掘金”