javascript - 如何使用 Flux 处理有状态的 DOM 元素

Question

我正在构建一个包含 HTML5 标签的 React 媒体播放器组件，<video>我想知道该标签及其 DOM 事件如何与 Flux 架构一起使用。

在 Flux 中，组件监听的 Store 是它的真实来源，但是对于一些元素，比如<video>标签，DOM 本身会维护一些状态，比如pausedor currentTime。我如何协调该状态与我的商店的状态？

到目前为止，我有一个Player组件和PlayerStore. 当<video>DOM 事件发生时，我一直在调度 Flux 操作，例如handlePlay、handlePause和handleTimeUpdate以提供对 的更新，PlayerStore以便商店可以保持该状态。同样，我自己的自定义播放器控件调度相同的动作，但我不确定如何“设置”<video>元素的状态，只有当原始事件来自控件而不是<video>事件时；即我不想陷入一个循环，例如：

1. <video>发送“我的时间码已更改”DOM事件
2. 组件听到 DOM 事件并分派一个动作
3. Store 接收到动作并使用新的时间码进行自我更新
4. 监听 Store 的组件会听到更改并（以某种方式）在<video>元素上设置新的时间码。然而，没有理由这样做，因为<video>元素已经知道了这个变化——它是几毫秒前首先触发它的那个！

您将如何处理这样的组件？

Answer 1

我建议在 shouldComponentUpdate 中检查您的视频标签当前状态，如果它已经处于目标状态，则跳过重新渲染。