Reactjs react能够在chrome中进行100毫秒的更新吗

操作系统：

ubuntu18.10

节点：

v12.13.1

浏览器：

79.0.3945.88（官方版本）（64位）

我是新手，但对Javascript很有经验。我正在尝试创建一个简单的“点击”游戏作为我的第一个react应用程序。我已经设置了一个100毫秒的计时器，我相信我正在正确地更新状态。每100毫秒我更新并显示一个DOM计数器，就是这样

我遇到的问题是，我的应用程序会在大约20秒后随机冻结chrome。当浏览器冻结时，返回浏览器的唯一方法是单击另一个选项卡。当我看chrome的性能标签时，它似乎与垃圾收集有关

我试着把这个问题归结到最低限度，但是如果

render（）

还有几个元素（比如10个），问题会变得更糟

我制作了一个默认应用程序，其中包含：

npx create-react-app my-app

这些是我唯一的改变：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };

    this.handleStop = this.handleStop.bind(this);
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      100
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  handleStop(e) {
    clearInterval(this.timerID);
  }

  tick() {
    const s = this.state;
    this.setState({
      count: s.count+1
    });
  }

  render() {
    let s = this.state;
    return (
      <div>
        <h1>{s.count}</h1>
        <button onClick={this.handleStop}>Stop Counter</button><br/>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0
};
this.handleStop=this.handleStop.bind（this）；
}
componentDidMount（）{
this.timerID=setInterval(
（）=>这个。勾选（），
100
);
}
组件将卸载（）{
clearInterval（this.timerID）；
}
扶手顶（东）{
clearInterval（this.timerID）；
}
勾选（）{
const s=该状态；
这是我的国家({
计数：s.count+1
});
}
render（）{
设s=this.state；
返回(
{s.count}
停止计数器

);
}
}

完整代码：

通常我们会期望100毫秒的帧，但是当它挂起时，我会得到14秒的帧。我必须单击另一个选项卡才能将其取回

---

我做错了什么？react不意味着永远都可以进行100毫秒的更新吗？谢谢。

我刚刚在我的个人电脑上试用了你的精确代码，两分钟后一切都好了。您遇到的任何问题都与代码无关。您是否看到“侦听器”在性能选项卡中不断攀升？我没有看到这种情况，但其他人看到了！看一看，这似乎是一个createreact应用程序错误