我在寻求一些设计建议。我正在构建一个 React/Redux 应用程序,除其他外,它将在模态对话框中播放 Youtube 视频。
我最初的设计是使用生命周期钩子(Hook)在模态的 componentDidMount
中初始化 Youtube iframe API。 .这种方法的问题在于 Youtube 播放器的启动成本很高——在打开模式和播放器弹出视频之间存在明显的延迟。
我需要做的是只初始化播放器一次,然后根据发送到模态的 Prop 提示不同的视频。但是,我想不出这个模型有一个好的、惯用的设计。
到目前为止我的想法:
任何关于如何设计它的想法将不胜感激!
最佳答案
您所描述的最后一个选项(首选)有一种类似的方法。
它被称为 portal
据我所知。
基本方法是:在 componentDidMount
中使用组件外部的元素进行操作。 (例如表演)和componentWillUnmount
(例如隐藏)。
React 的强大功能之一是它的生命周期方法。即使没有 .render()
,您也可以创建组件方法
示例可以在这里找到
https://github.com/tajo/react-portal
和这里
https://github.com/FormidableLabs/react-music
在 React Conf 上有一个很棒的讨论,它彻底改变了我对生命周期方法的看法。
https://youtu.be/395ou6k6C6k
关于reactjs - 设计讨论 : Modal React Component with Youtube Player,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44900577/