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

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

谢谢大家。我已经通过将子组件分开来解决了我的问题。并分派到redux存储以为setInterval（）函数中的每个棍子设置currentTime。现在，它就像是一种魅力。

Answer 2

尝试使用：

  shouldComponentUpdate(nextProps, nextState) {
    return false;  
  }