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

Posted 2023-02-22

【中文标题】如何使用 Flux 处理有状态的 DOM 元素

【英文标题】：How to handle with stateful DOM elements with Flux

【发布时间】：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（和容器组件）的原因。

【参考方案1】：

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