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

Posted 2023-02-22

【中文标题】使用 setInterval 时如何防止 React 重新渲染整个组件

【英文标题】：How to prevent React from re-rendering the whole component when using setInterval

【发布时间】：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。

【参考方案1】：

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

【参考方案2】：

尝试使用：

  shouldComponentUpdate(nextProps, nextState) 
    return false;