2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

React 中不使用 setTimeout 的定时器：useTimeout、useInterval、useCountDown 和 useRafFn

定时器是每个 React 开发者前十次都会亲手编写，且至少六次会写错的东西之一。这种模式看起来很简单：在 useEffect 中调用 setTimeout，返回一个清理函数，然后交付代码。接着代码审查发现了过期的闭包问题。随后因为延迟是从挂载时的属性中读取，而不是从当前渲染中读取，导致出现了错误工单。然后有人注意到，在页面加载缓慢时，组件卸载后间隔定时器仍在运行。接着你发现 setInterval 每个周期都会产生轻微的漂移，导致一分钟后的倒计时误差达到 800 毫秒。最后，你的性能审计标记出了那个在标签页隐藏时无人记得暂停的动画循环。

这些错误都不有趣。它们都属于同一类错误：定时器逻辑本身没问题，出问题的是与 React 的集成。ReactUse 提供了六个小型钩子，一次性处理这种集成，让你能够单独编写定时器逻辑：useTimeout、useTimeoutFn、useInterval、useCountDown、useRafFn 以及 useRafState。

本文将逐一介绍这些钩子——底层原语是什么、在 React 中手动实现的版本长什么样、该钩子隐藏了什么错误，以及它在代码中的实际适用场景。读完本文后，你应该知道该使用哪个定时器钩子以及原因。

用一段代码概括问题

在使用任何钩子之前，以下是几乎每个 React 代码库至少会出现一次的情况：

function Toast({ message, durationMs }: { message: string; durationMs: number }) {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const id = setTimeout(() => setVisible(false), durationMs);
    return () => clearTimeout(id);
  }, [durationMs]);

免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。