React 的单一真理来源与 html5 视频

Posted 2023-05-07

【中文标题】React 的单一真理来源与 html5 视频

【英文标题】：React's single source of Truth with html5 video

【发布时间】：2017-04-10 00:30:03

【问题描述】：

我正在构建一个应用程序，它有一个 html5 视频和几个与视频交互并使用视频的 currentTime 的控件。

据我了解，App 组件应保持视频的 currentTime 状态并将其传递给其他子项（例如，显示当前时间为几秒的显示器）。

假设我按下键盘快捷键跳过前面 5 秒的视频。这样我就必须更新 App 状态并将 currentTime 传递给具有 html5 video 标签的组件，因此它会自行更新。

但是，当视频播放时，我发现 App 状态的不断更新令人费解，因为它应该将状态向下传递给视频，从而导致视频播放时出现故障。

我可以使用“shouldComponentUpdate”函数纠正这个问题，但是，文档建议不要使用它，因为它可能在未来被弃用。我可以使用我自己的布尔标志来模仿 shouldComponentUpdate 功能，但这开始让我的代码闻起来很糟糕，看来我不应该试图控制状态传递标志。

在我看来，这里的“单一事实来源”应该是 html5 视频 currentTime 属性，但这似乎不符合 react 所暗示的状态层次结构（App 组件应该保持状态并传递它到其他组件）

我是否应该将 currentTime 保持为 App 的状态，并尝试破解视频更新，使其不会抖动和循环？

【问题讨论】：

是否可以在视频组件而不是应用组件中管理 currentTime 的状态？

我猜不是因为兄弟组件需要读写状态，但我不太确定，似乎模式是把它留给父级。否则，可以将状态保留在视频组件中

非常有趣的问题，但真正唯一的问题是，当视频告诉 react 更改 currentTime 时，最终会将视频更改为该时间的一小部分时间，从而导致不良回放。但是，您不能关闭更新视频的 currentTime，因为这样它就不会再响应来自同级组件的合法更新。在我看来，您需要能够通过 currentTime 传递某种“发件人”，并让发件人本身忽略更改。我会考虑答案

【参考方案1】：

要么做这里该做的事，要么干脆阻止重新发明***并使用它

http://mderrick.github.io/react-html5video/

【讨论】：

我确实在研究他们是如何解决问题的，但我不喜欢他们做出的一些设计决策，我宁愿了解我正在使用的技术，也不愿将 git 项目与单个项目结合起来主要作者和其他 3 位合作者。

在您阅读并理解了他们的方法之后，请返回并更新一些详细的 cmets，说明您为什么不喜欢他们的方法。如果你最终做了不同的事情，请在此告诉我这些不同之处。