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

【问题标题】：Better React component hierarchy for rendering progress bar each second?每秒渲染进度条的更好的 React 组件层次结构？
【发布时间】：2018-01-21 01:57:39
【问题描述】：

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

状态表示：

{
            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 放入其中，但这感觉很奇怪。什么是最佳的组件结构？

【问题讨论】：

您确定他们正在重新渲染吗？ React 区分组件并仅呈现更改。

标签： javascript reactjs

【解决方案1】：

查看shouldComponentUpdate

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

你有可以发布的例子吗？

【讨论】：

【解决方案2】：

创建一个 ProgressBar React 组件并将 state.progress 设置为属性。所以每次你的播放器更新 state.progress 你的 ProgressBar 组件都会渲染。

我通过这种方式控制我的文件上传进度并且效果很好。

【讨论】：