BFE.devAI解答 - React 代码题
2. useTimeout()

下面是一个满足上述要求的useTimeout()代码：

import { useEffect, useRef } from 'react';function useTimeout(callback, delay) {  const savedCallback = useRef();  const savedDelay = useRef();  useEffect(() => {    savedCallback.current = callback;  }, [callback]);  useEffect(() => {    savedDelay.current = delay;  }, [delay]);  useEffect(() => {    function tick() {      savedCallback.current();    }    if (savedDelay.current !== undefined) {      const id = setTimeout(tick, savedDelay.current);      return () => clearTimeout(id);    }  }, [savedDelay.current]);  if (delay !== savedDelay.current) {    savedDelay.current = delay;  }}

在这个自定义Hook中，我们使用了三个useEffect()：

• 第一个Effect用于更新保存的callback
• 第二个Effect用于更新保存的delay
• 第三个Effect用于调用setTimeout()并在组件卸载时清除计时器

同时，我们将savedCallback和savedDelay保存在引用中，并通过if (delay !== savedDelay.current)的判断逻辑，实现了如果delay改变才重新设置计时器的需求。