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

【问题标题】：How to prevent React from re-rendering the whole component when using setInterval使用 setInterval 时如何防止 React 重新渲染整个组件
【发布时间】：2019-12-05 07:52:44
【问题描述】：

我正在开发一个应用播放器。见下图：

进度条必须显示当前时间，但每标记一次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.
}

【问题讨论】：

我假设它是一个单一的组件，对吧？如果是这样，如何创建两个子组件，一个父组件？一个孩子将渲染播放器，另一个将渲染底部进度条。在这种情况下，为第二个孩子设置状态不应该影响第一个。
@Yossi：是的，如果分成两个子组件，结果相同
请发布包含 3 个组件的代码。
我找到了一个类似的question。

标签： reactjs setinterval rerender

【解决方案1】：

谢谢大家。我已经通过分离子组件解决了我的问题。并派发到 redux 存储以在 setInterval() 函数中为每个棒设置 currentTime。现在它的工作就像一个魅力。

【讨论】：

【解决方案2】：

尝试使用：

  shouldComponentUpdate(nextProps, nextState) {
    return false;  
  }

【讨论】：