React函数组件中useCallback与useEffect内setTimeout的正确用法

一、正确实现方式 #

核心是利用依赖popperOpen状态的useEffect，结合useRef存储定时器ID来避免内存泄漏和错误状态更新，具体实现如下：

1. 用useState管理Popper的可见状态popperOpen和锚点元素anchorEl；
2. 用useRef保存定时器ID，确保在组件生命周期内能访问到同一个定时器引用；
3. 点击按钮时，设置锚点并将popperOpen设为true；
4. 在useEffect中监听popperOpen的变化：当popperOpen为true时启动定时器，到时间后关闭Popper；当popperOpen变为false（比如手动关闭）或组件卸载时，清除定时器。

完整代码示例：

import { useState, useEffect, useCallback, useRef } from 'react';
import Popper from '@mui/material/Popper';

function AutoClosePopper() {
  const [popperOpen, setPopperOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const timerRef = useRef(null);

  const handleButtonClick = useCallback((event) => {
    setAnchorEl(event.currentTarget);
    setPopperOpen(true);
  }, []);

  useEffect(() => {
    if (popperOpen) {
      // 设置3秒后自动关闭
      timerRef.current = setTimeout(() => {
        setPopperOpen(false);
        setAnchorEl(null);
      }, 3000);
    } else {
      // 手动关闭时清除定时器
      if (timerRef.current) {
        clearTimeout(timerRef.current);
        timerRef.current = null;
      }
    }

    // 组件卸载或依赖更新时清理定时器
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, [popperOpen]);

  return (
    <div>
      <button onClick={handleButtonClick}>打开Popper</button>
      <Popper open={popperOpen} anchorEl={anchorEl}>
        <div style={{ padding: '16px', background: '#fff', border: '1px solid #ccc' }}>
          我会3秒后自动消失
        </div>
      </Popper>
    </div>
  );
}

export default AutoClosePopper;

之前尝试的问题分析 #

• 把setTimeout放在useCallback中：点击按钮时，先设置popperOpen为true，紧接着触发setTimeout去关闭。但React的状态更新是异步的，Popper还没完成渲染就被设置为隐藏，所以看起来“立即消失”。
• 无依赖数组的useEffect：只会在组件挂载时执行一次，此时popperOpen初始值为false，不会触发定时器逻辑，因此Popper永远不会自动关闭。
• 依赖popperOpen但未清理定时器：多次触发Popper显示会叠加多个定时器，可能导致Popper提前关闭或组件卸载后仍执行setState引发警告。

二、React频繁重渲染下的setTimeout逻辑理解 #

1. setTimeout脱离React渲染周期：它是浏览器提供的API，React重渲染会重新执行组件函数，但已启动的定时器不会被自动清除，必须手动调用clearTimeout终止。
2. useRef存储定时器ID的必要性：组件每次重渲染时，内部变量会重新声明。如果不用useRef，每次重渲染拿到的定时器ID都是新变量，无法清除之前启动的定时器，导致多个定时器同时运行，引发错误的状态更新。
3. 状态更新与定时器的关系：状态更新会触发重渲染，但setTimeout中的setState是异步执行的，即使组件多次重渲染，只要定时器未被清除，到时间仍会执行。因此必须通过useEffect的依赖数组监听状态变化，在合适时机启动/清除定时器。
4. useEffect的依赖控制：依赖popperOpen可以确保每次Popper显示时启动新的定时器，隐藏时清除旧的，避免无效的定时器占用资源。

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