【发布时间】：2015-09-28 12:59:19
【问题描述】：
我正在构建一个包含 HTML5 <video> 标签的 React 媒体播放器组件，我想知道该标签及其 DOM 事件如何与 Flux 架构配合使用。
在 Flux 中，组件侦听的 Store 是它的真实来源，但是对于某些元素，例如 <video> 标签，DOM 本身会维护一些状态，例如 paused 或 currentTime。如何协调该状态与我的商店的状态？
到目前为止，我有一个Player 组件和PlayerStore。当<video> DOM 事件发生时，我一直在调度诸如handlePlay、handlePause 和handleTimeUpdate 之类的Flux 操作以提供对PlayerStore 的更新，以便商店可以保持该状态。同样，我自己的自定义播放器控件发送相同的操作，但我不确定如何“设置”<video> 元素的状态，仅当原始事件来自控件时，而不是<video> 事件；即我不想陷入一个循环，例如：
-
<video>发送“我的时间码已更改”DOM 事件 - 组件听到 DOM 事件并分派一个动作
- 商店收到操作并使用新的时间码进行自我更新
- 监听 Store 的组件会听到更改并（以某种方式）在
<video>元素上设置新的时间码。但是，没有理由这样做，因为<video>元素已经知道更改 - 它是几毫秒前首先触发它的那个！
您将如何处理这样的组件？
【问题讨论】：
-
为什么不跟踪组件本身的播放/暂停状态（如
this.setState）？为什么要为handlePlay之类的东西发送操作？您的组件之外的任何事情都需要了解这些事件吗？ -
我会这样做：codepen.io/FullR/pen/YXLQyO?editors=001（不是一个功能示例；只是基本结构）但我假设您不需要改变视频元素的状态（例如以编程方式通过传递的道具更改暂停状态或时间）。如果您需要更改这些内容，我建议您利用
componentDidUpdate挂钩对<video>元素进行必要的更改。 -
我计划将当前播放头时间保存到数据库中，这就是我涉及 Store（和容器组件）的原因。
标签： javascript reactjs reactjs-flux flux martyjs