React函数组件setTimeout重复触发问题：如何实现单次调用优化？

你的问题核心在于函数组件每次重渲染都会重新执行整个函数体，所以每当父组件App的notifications状态更新时，所有已渲染的Notification组件都会重新运行，导致每个通知被多次设置定时器，最终可能提前触发onClose，或者重复调用removeNotification。

下面是两种推荐的优化方案，确保每个通知的定时器只初始化一次：

方案一：改用useEffect钩子（函数组件+React Hooks） #

把Notification改成使用useEffect的函数组件，useEffect可以让我们在组件挂载时只执行一次定时器逻辑，并且在组件卸载时清理定时器，避免内存泄漏。

修改后的Notification组件代码：

import { useEffect } from 'react';

function Notification(props) {
  console.log("Notification function component called");

  useEffect(() => {
    // 组件挂载时设置定时器
    const timerId = setTimeout(() => {
      props.onClose();
    }, 4000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timerId);
  }, [props.onClose]); // 依赖数组：仅当onClose变化时重新执行逻辑

  return (
    <div>
      {props.children}
      <button onClick={props.onClose}>Close</button>
    </div>
  );
}

为什么这样有效？ #

• useEffect的依赖数组[props.onClose]确保只有当onClose函数变化时，才会重新创建定时器（在你的App组件中，每个Notification的onClose是绑定了唯一id的箭头函数，每个通知的逻辑独立，不会误触发）。
• 组件卸载时的清理函数会清除定时器，避免组件已经被移除后，定时器还触发onClose导致错误。

方案二：改用类组件 #

如果你更熟悉类组件的生命周期，可以把Notification改成类组件，利用componentDidMount只在组件挂载时设置一次定时器，componentWillUnmount清除定时器：

class Notification extends React.Component {
  timerId = null;

  componentDidMount() {
    console.log("Notification component mounted");
    // 组件挂载时仅初始化一次定时器
    this.timerId = setTimeout(() => {
      this.props.onClose();
    }, 4000);
  }

  componentWillUnmount() {
    // 组件卸载时清除定时器
    clearTimeout(this.timerId);
  }

  render() {
    return (
      <div>
        {this.props.children}
        <button onClick={this.props.onClose}>Close</button>
      </div>
    );
  }
}

额外优化：减少不必要的重渲染 #

你还可以给Notification组件添加缓存机制，避免无意义的重渲染：

• 函数组件：使用React.memo包裹组件：const MemoizedNotification = React.memo(Notification);，之后在App中使用MemoizedNotification
• 类组件：让Notification继承React.PureComponent而非React.Component

这样当父组件更新时，只有props发生变化的Notification才会重渲染，进一步提升性能。

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