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

Question

我正在构建一个包含HTML5 <video>标记的React媒体播放器组件，并且我想知道该标记及其DOM事件与Flux架构的关系。

在Flux中，组件侦听的存储是其真实来源，但是对于<video>标记之类的元素，DOM本身会维护某些状态，例如paused或{{1} }。如何将该状态与我的商店的状态相协调？

到目前为止，我已经获得了currentTime组件和Player。当PlayerStore DOM事件发生时，我一直在调度Flux操作，例如<video>，handlePlay和handlePause，以便为handleTimeUpdate提供更新，以便商店可以保持这种状态。同样，我自己的自定义播放器控件会调度相同的操作，但我不确定如何设置＆＃34;设置＆＃34;仅当原始事件来自控件而不是PlayerStore事件时，<video>元素的状态;也就是说，我不想被困在一个循环中，例如：

1. <video>发送＆＃34;我的时间码已更改＆＃34; DOM事件
2. 该组件会听到DOM事件并发送一个操作
3. 商店收到操作并使用新的时间码更新自己
4. 收听商店的组件会听到更改并在<video>元素上设置（以某种方式）新的时间码。但是，没有理由，因为<video>元素已经知道了这一变化 - 它是几毫秒之前首先触发它的那个！

你会如何处理这样的组件？

Answer 1

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