reactjs - 设计讨论 : Modal React Component with Youtube Player

Question

我在寻求一些设计建议。我正在构建一个 React/Redux 应用程序，除其他外，它将在模态对话框中播放 Youtube 视频。

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

我需要做的是只初始化播放器一次，然后根据发送到模态的 Prop 提示不同的视频。但是，我想不出这个模型有一个好的、惯用的设计。

到目前为止我的想法:

修改模态，使其永远不会卸载，而只是根据一些 Prop 值隐藏。

这是我在这个应用程序之前的非 React 版本中的设计，但感觉很 hacky，我想想出更好的东西。

应用加载时初始化 youtube 播放器，并将元素保存在商店中，通过要呈现的 Prop 将其传递给模态。

在 Redux FAQ 中建议不要这样做。

在始终安装的应用程序的更高级别初始化 youtube 播放器，但使用 CSS 将其隐藏。在安装模态框时，将元素移入内部，然后在卸载之前再次将其移出。

到目前为止，这可能是我最喜欢的想法，只是感觉那里可能有更好的想法。

任何关于如何设计它的想法将不胜感激!

Answer 1

您所描述的最后一个选项(首选)有一种类似的方法。
它被称为 portal据我所知。

基本方法是:在 componentDidMount 中使用组件外部的元素进行操作。 (例如表演)和componentWillUnmount (例如隐藏)。

React 的强大功能之一是它的生命周期方法。即使没有 .render()，您也可以创建组件方法

示例可以在这里找到
https://github.com/tajo/react-portal

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

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