React中setState结合setInterval致数字闪烁问题及解决咨询

你猜得完全没错！问题根源就是每次组件渲染（render）都会创建一个新的定时器，短时间内多个定时器同时触发updateUnread更新state，导致数字疯狂闪烁。

先看你原代码的问题点：

updateUnread(){ 
  this.setState({ unreadCount: Math.floor(Math.random() * 100) }); 
} 
render(){ 
  setInterval(() => this.updateUnread(), 2000); 
  return ( 
    <div className="wrapper"> 
      <Messages unreadCount={this.state.unreadCount} /> 
    </div> 
  ); 
}

每次setState都会触发组件重新render，而每次render又会新建一个定时器，循环往复，定时器数量越来越多，自然会让数字不停闪烁。

下面给你两种正确的实现方式，根据你用的组件类型选择：

类组件解决方案 #

对于类组件，我们利用React的生命周期钩子，把定时器的创建和清除放在合适的时机：

class MessageBadge extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      unreadCount: 0
    };
    // 保存定时器ID，方便后续清除
    this.intervalId = null;
  }

  updateUnread = () => {
    this.setState({ 
      unreadCount: Math.floor(Math.random() * 100) 
    });
  };

  componentDidMount() {
    // 组件挂载完成后，只创建一次定时器
    this.intervalId = setInterval(this.updateUnread, 2000);
  }

  componentWillUnmount() {
    // 组件卸载前清除定时器，避免内存泄漏
    clearInterval(this.intervalId);
  }

  render() {
    return (
      <div className="wrapper">
        <Messages unreadCount={this.state.unreadCount} />
      </div>
    );
  }
}

函数组件（React Hooks）解决方案 #

如果是用函数组件开发，我们可以用useEffect钩子来实现同样的效果：

import { useState, useEffect } from 'react';

function MessageBadge() {
  const [unreadCount, setUnreadCount] = useState(0);

  const updateUnread = () => {
    setUnreadCount(Math.floor(Math.random() * 100));
  };

  useEffect(() => {
    // 创建定时器
    const intervalId = setInterval(updateUnread, 2000);
    // 返回清除函数，组件卸载时自动执行
    return () => clearInterval(intervalId);
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行一次

  return (
    <div className="wrapper">
      <Messages unreadCount={unreadCount} />
    </div>
  );
}

核心注意事项 #

• 绝对不要在render方法里创建定时器，因为render会随着state/props变化频繁触发
• 定时器仅在组件挂载完成后创建一次，避免重复创建
• 组件卸载时必须清除定时器，防止内存泄漏和无效的state更新

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