如何使用React函数组件的useState/useEffect复现类组件setState回调的功能？

我帮你分析下问题所在，然后给出对应的修复方案——你的函数组件之所以和类组件行为不一致，核心原因是useEffect的触发逻辑和类组件setState回调的逻辑完全不同：

问题根源 #

类组件中，setState的第二个回调函数是绑定到这一次特定的状态更新的：只有当这次setState完成（也就是通知被添加到数组后），才会执行回调里的超时逻辑，且只会执行一次。

但你在函数组件里用useEffect监听state.alerts，这意味着每次alerts数组发生变化（不管是添加还是移除通知），都会触发新的effect。更麻烦的是，旧的effect里捕获的是当时的state.alerts旧值，当多个超时回调先后执行时，会互相覆盖状态，导致和类组件的预期行为不符。

修复方案：直接在addNotice中绑定超时逻辑 #

我们可以把超时逻辑直接放到添加通知的函数里，同时使用setState的函数式更新形式（接收前一个状态作为参数），确保每次状态更新都基于最新值，避免闭包陷阱：

import { useState, useRef, useEffect } from 'react';

// 假设你的tail工具函数是返回数组除第一个元素
const tail = (arr) => arr.slice(1);

const NoticesWithFunctionCallback = () => {
  const [state, setState] = useState({ alerts: [], show: false });
  const timerRef = useRef([]); // 保存定时器ID，用于组件卸载时清理

  const addNotice = (e) => {
    // 1. 添加新通知：用函数式更新确保基于最新状态
    setState(prevState => ({
      ...prevState,
      alerts: [...prevState.alerts, ""]
    }));

    // 2. 设置3秒后移除最早的通知，同样用函数式更新
    const timerId = setTimeout(() => {
      setState(prevState => ({
        ...prevState,
        alerts: tail([...prevState.alerts])
      }));
      // 清理已完成的定时器ID
      timerRef.current = timerRef.current.filter(id => id !== timerId);
    }, 3000);

    // 把当前定时器ID存入ref
    timerRef.current.push(timerId);
  };

  // 组件卸载时，清除所有未完成的定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      timerRef.current.forEach(timerId => clearTimeout(timerId));
    };
  }, []);

  return (
    <div className="App">
      <h3> Notices using function component with UseState </h3>
      <Generator addNotice={addNotice} />
      <Container>
        {state.alerts.map((item, index) => (
          <Alert key={index}>some alert here</Alert>
        ))}
      </Container>
    </div>
  );
};

为什么这个方案能匹配类组件的行为？ #

• 和类组件逻辑对齐：每添加一个通知，就绑定一个对应的3秒超时操作，精准对应到这次添加的动作。
• 函数式setState(prevState => ...)绕过了闭包问题，每次更新都能拿到最新的状态值。
• 用useRef管理定时器ID，在组件卸载时清理所有未完成的定时器，避免内存泄漏。

额外优化：给通知添加唯一ID #

如果后续需要更灵活的通知管理（比如不同通知显示时长不同、手动关闭特定通知），建议给每个通知添加唯一ID，代替数组索引作为key，逻辑会更健壮：

const addNotice = (e) => {
  const noticeId = Date.now(); // 用时间戳生成唯一ID
  setState(prevState => ({
    ...prevState,
    alerts: [...prevState.alerts, noticeId]
  }));

  const timerId = setTimeout(() => {
    setState(prevState => ({
      ...prevState,
      alerts: prevState.alerts.filter(id => id !== noticeId)
    }));
    timerRef.current = timerRef.current.filter(id => id !== timerId);
  }, 3000);

  timerRef.current.push(timerId);
};

// 渲染时用唯一ID作为key
{state.alerts.map((noticeId) => (
  <Alert key={noticeId}>some alert here</Alert>
))}

这样每个通知都会在自己的3秒超时后被精准移除，也避免了数组索引作为key可能导致的渲染异常。

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