React中setTimeout执行表现不稳定，通知弹窗显示时长异常如何解决

• 首先纠正一个认知误区：setState在React的合成事件、生命周期函数（React 18后还包括Promise、setTimeout等异步回调场景）中默认是批量异步更新的，调用setState后不会立刻修改state、触发重渲染，只是把更新加入队列，等当前上下文执行完后再批量处理。
• 核心诱因是未做定时器去重：每次触发弹窗显示逻辑时都会新增一个2秒后隐藏的定时器，若2秒内多次触发该逻辑，多个定时器会同时生效，前序定时器提前将弹窗设为隐藏，就会出现弹窗一闪而过、显示时长不足2秒的问题。
• 额外异常场景：如果2秒等待区间内组件因为props变化、其他state更新触发重渲染，甚至组件被卸载再挂载，未被清理的定时器会尝试修改已卸载组件的state，不仅会导致显示逻辑错乱，还会抛出React警告。

1. 新增定时器去重逻辑 #

将定时器ID挂载到组件实例上，每次触发显示逻辑前先清空上一个未执行的定时器，保证同一时间只有一个隐藏定时器生效：

// 类组件初始化时声明定时器存储变量
this.hideNotifyTimer = null

// 弹窗显示逻辑改造
if (this.hideNotifyTimer) clearTimeout(this.hideNotifyTimer)
this.setState({
  notificationStyle: {display: "inline"}
})
this.hideNotifyTimer = setTimeout(() => {
  this.setState({
    notificationStyle: {display: "none"}
  })
  this.hideNotifyTimer = null
}, 2000)

2. 增加卸载清理逻辑 #

在componentWillUnmount生命周期中清空残留定时器，避免内存泄漏和已卸载组件更新报错：

componentWillUnmount() {
  if (this.hideNotifyTimer) clearTimeout(this.hideNotifyTimer)
}

3. （可选）优化计时起点精度 #

如果需要严格从弹窗真正渲染完成的时间开始计算2秒，可以将setTimeout放入setState的第二个回调参数中，该回调会在state更新、组件重渲染完成后才执行：

if (this.hideNotifyTimer) clearTimeout(this.hideNotifyTimer)
this.setState({
  notificationStyle: {display: "inline"}
}, () => {
  this.hideNotifyTimer = setTimeout(() => {
    this.setState({
      notificationStyle: {display: "none"}
    })
    this.hideNotifyTimer = null
  }, 2000)
})

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