今天突然想分享一些東西
其實分享到現在可能會有人覺得很枯燥,這些東西在工作上不一定用得到,能不能講一些實際常常會用到的test或者hook,我會這樣以基礎的來講,是因為在工作上常常會碰到不同的情形,我沒辦法模擬每個情況,但是可以根據我們之前有學到的test裡的技巧放進去,最後能自己寫出來才是最重要
廢話不多說,就來寫useTimeout吧
import { useEffect, useRef } from "react";
// Custom Hook
export function useTimeout(callback: () => void, delay: number | null) {
const savedCallback = useRef<() => void>();
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
function fn() {
if (savedCallback.current) {
savedCallback.current();
}
}
if (delay !== null) {
const id = setTimeout(fn, delay);
return () => clearTimeout(id);
}
}, [delay]);
}
我使用 useRef
來保存 callback
來確保總是使用最新版本的 callback
的方法,不管 useEffect
的依賴如何變化。 useTimeout
內部總是執行最新 callback
,比較不會有閉包問題