Question

我在反应项目中实施自定义视频播放器。结构是（简化）：

<VideoContainer> // most outer div, set to fullscreen, etc
  <VideoElement // contains the actual <video> element, gets controlled through the props passed here
    muted={this.state.muted}
    playing={this.state.playing}
    onTimeChange={this.timeChange}
  />
  <Controls>
    <Play
      playing={this.state.playing}                     
      onTogglePlay={this.togglePlay}
    />
    <ProgressBar
      currentTime={this.state.currentTime} // is this ok?
    />
    // ... other controls
  </Controls>
</VideoContainer>

我通过VideoContainer的状态控制所有内容，并将eventHandlers传递给需要它们的控件，效果非常好。

// state of the VideoContainer
this.state = {
  playing: false,
  muted: true,
  currentTime: 0,
  // ...
};

现在问我的问题：

是否可以将currentTime作为状态的一部分？

我担心这会导致更多状态更新并重新呈现VideoContainer。现在我将整个视频元素传递给需要像进度条那样的时间段的东西，但是如果我通过状态管理它并且只将currentTime作为道具传递它将与其余部分更加一致。

Answer 1

将currentTime作为状态的一部分可以吗？是的，它是

VideoContainer元素会在currentTime更改时呈现，但虚拟dom会处理此问题并且只是重新呈现进度条

但是如果你想要更多地优化它，最好自己处理它并且不要使用state for currentTime。

Answer 2

将currentTime作为状态的一部分可以吗？

是的，没关系。

你的<VideoElement />组件不会被重新渲染，除非你在内部设置当前时间状态，或者你没有传递一些新的更新道具（因为我看到你没有这样做）

此外，react-media-player将是React中的视频播放器如何获得良好结构的一个很好的例子。您将更新的当前时间传递给上部组件，然后将其传递给<ProgressBar />组件。

React - 使用带自定义控件的视频时，在timeupdate上更新状态

2 个答案: