更好的React组件层次结构每秒渲染进度条？

Question

我正在写一个简单的反应应用程序，它是一个音乐播放器。它有专辑封面，播放/暂停按钮和进度条。当前的组件结构是渲染和。

州代表：

{
            tracks: //array of audio urls
            current: new Audio(tracks[0].url),
            artistName: //str
            trackName: //str
            albumArt: // image url
            playing: true,
            progress: 0,
            duration: 0,
}

然而，这是一个问题。我们需要进度条每秒重新渲染以显示跟踪进度。但是现在，在里面，我有一个事件监听器：

currentTrack.addEventListener('timeupdate', () => {
            this.setState({
            progress: this.state.currentTrack.currentTime
        });
});

但这会导致每个组件重新呈现，即使状态中只有progress发生了变化。

我考虑将currentTrack放在<Controls>组件中作为自己的状态，但随后整个控件组件将每秒重新渲染一次。我能想到的唯一的另一个抽象是使进度条成为它自己的组件并将currentTrack放在其中，但这感觉很奇怪。什么是最佳组件结构？

Answer 1

查看shouldComponentUpdate

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

你有一个例子，你可以发布更多的例子吗？

Answer 2

创建ProgressBar React Component并将state.progress设置为property。因此，每当您的播放器更新state.progress时，您的ProgressBar组件都将呈现。

我控制文件上传进度的方式，效果很好。