1秒ごとにプログレスバーを表示するためのリアクタコンポーネント階層が改善されましたか？

私は音楽プレイヤーである簡単な反応アプリを書いています。アルバムアートフレーム、再生/一時停止ボタン、および進行状況バーがあります。現在のコンポーネント構造はレンダリングとレンダリングです。1秒ごとにプログレスバーを表示するためのリアクタコンポーネント階層が改善されましたか？

状態の表現は：

{ 
      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状態に変化しているにもかかわらず、再レンダリングするためにあらゆるコンポーネントを原因となります。

<Controls>コンポーネントの内部にcurrentTrackを置くことを考えましたが、コントロールコンポーネント全体が1秒ごとに再描画されます。私が考えることができる唯一の他の抽象概念は、プログレスバーを独自のコンポーネントにしてcurrentTrackをその内部に配置することですが、それは変だと感じます。最適なコンポーネント構造は何でしょうか？

出典

2017-08-12 Marc Fletcher

本当に再レンダリングしていますか？ Reactはコンポーネントをdiffし、変更だけをレンダリングします。 – Doug