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改变才重新设置计时器的需求。