在React点击事件处理器中使用未清除的setTimeout是否为最佳实践？

结论先行：这不算最佳实践，你的场景虽然能正常运行，但存在潜在问题，严谨起见还是应该在组件卸载时清理未完成的定时器。

具体分析你的示例 #

你的代码里，用户点击按钮后1秒弹出alert，如果在这1秒内组件始终挂载着，确实不会有任何问题。但如果用户点击按钮后，在1秒内就触发了组件卸载（比如跳转到其他页面、关闭弹窗等），这时候定时器依然会在1秒后执行，弹出alert——这会给用户带来非常突兀的体验，要是回调里涉及组件状态或DOM操作，还可能引发报错。

为什么要清理定时器？ #

定时器是绑定在全局环境（比如window）上的，React组件卸载后，组件实例和相关DOM会被清理，但定时器不会自动销毁。未清理的定时器不仅会导致不必要的代码执行，还可能造成内存泄漏（如果回调里引用了组件内的变量、状态，会让这些本该被回收的资源一直被持有）。

改进方案 #

用useRef存储定时器ID，再通过useEffect在组件卸载时清除：

import { useRef, useEffect } from 'react';

export const App = () => {
  const timeoutRef = useRef(null);

  const handleClick = () => {
    // 先清除之前可能存在的定时器，避免多次点击触发多个alert
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    timeoutRef.current = setTimeout(() => {
      window.alert('hello');
      // 执行完后清空ref
      timeoutRef.current = null;
    }, 1000);
  };

  useEffect(() => {
    return () => {
      // 组件卸载时清除定时器
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return (
    <div>
      <h1>Hello</h1>
      <button onClick={handleClick}>click me</button>
    </div>
  );
};

补充说明 #

如果你的组件是永远不会被卸载的根组件，那确实可以不用清理。但绝大多数业务组件都存在被卸载的可能，养成清理定时器的习惯能避免很多潜在bug，这也是React开发中的通用最佳实践。

内容的提问来源于stack exchange，提问作者Radex