如何防止React在使用setInterval时重新渲染整个组件

Question

我正在开发一个应用程序播放器。请看下面的图片：

进度条必须显示当前时间，但每次勾选setInterval（），我的组件都会重新呈现所有内容。这导致我的应用程序运行缓慢。

这是我的代码：

this.state = {
    currentTime: 0,
}


/// ....
const tick = 100;
setInterval(() => {
   this.setState({currentTime += tick});
}, tick);


render() {
   // This will call every tick (100ms). That's what I don't want, but if I skip it, the progress will not show the current time.
}

Answer 1

尝试使用：

  shouldComponentUpdate(nextProps, nextState) {
    return false;  
  }

Answer 2

谢谢大家。我通过将组件分离到子组件解决了我的问题。并分派到redux store，在setInterval（）函数中为每个棒设置currentTime。现在它的工作就像一个魅力。