设计讨论：使用Youtube播放器的模态反应组件

Question

我在提出一些设计建议之后。我正在建立一个React / Redux应用程序，除了其他功能外，还会在模态对话框中播放Youtube视频。

我最初的设计是使用生命周期钩子来初始化模态componentDidMount中的Youtube iframe API。这种方法的问题在于Youtube播放器的启动成本很高 - 打开模式之间有明显的延迟，播放器弹出视频。

我需要做的只是初始化播放器一次，然后根据哪些道具发送到模态来定位不同的视频。但是，我不能想到这个模型的一个很好的惯用设计。

我到目前为止的想法：

• 使用模态进行操作，以便它永远不会卸载，但只是隐藏了一些道具价值。
  • 这是我之前使用此应用程序的非React版本的设计，但感觉非常hacky，我想提出更好的东西。
• 在应用加载时初始化youtube播放器，并将该元素保存在商店中，通过要渲染的道具将其传递给模态。
  • 建议Redux FAQ
  使用此功能
• 在应用程序的某个更高级别初始化youtube播放器，该应用程序始终挂载，但使用CSS隐藏它。安装模态时，将元件移到内部，然后在卸载前再将其移出。
  • 到目前为止，这可能是我最喜欢的想法，只是觉得可能有更好的想法。

任何关于如何设计这个的想法都将非常感激！

Answer 1

与您描述的最后一个选项（首选选项）有类似的方法。 据我所知，它被称为portal。

基本方法是：在componentDidMount（例如show）和componentWillUnmount（例如hide）中使用元素外部的元素进行操作。

React的一个强大功能是它的生命周期方法。即使没有.render()方法

，您也可以创建组件

可在此处找到示例 https://github.com/tajo/react-portal

在这里 https://github.com/FormidableLabs/react-music

在React Conf上有一个很好的讨论，这完全改变了我对生命周期方法的看法。 https://youtu.be/395ou6k6C6k