在道具更新时调用组件上的自定义方法

Question

我有YouTubeiFrame反应组件呈现空div，然后使用componentDidMount将YouTube iframe播放器放入该div中。一切正常。我在使用播放器的组件上定义了cueVideo方法 用于提示新视频的API：

cueVideo(videoId) {
  this.player.cueVideoById(videoId)
}

在我的应用程序的不同位置，您可以单击按钮或其他操作以指示您要播放新视频。当您执行此操作时，“currentVideo”状态将通过redux更新，因此YouTubeiFrame组件会将新视频ID作为更新的道具接收。

我的问题是如何调用上面的cueVideo方法来响应更新的道具。我考虑过使用shouldComponentUpdate将this.props.currentVideo与下一个道具进行比较 但很有意思这个方法确实应该返回true / false，因此可以调用render函数。我想要做的就是当currentVideo prop更改时调用cueVideo - 我真的不需要重新渲染。

最好的方法是什么？

Answer 1

  

我想做的就是当currentVideo prop更改时调用cueVideo - 我真的不需要重新渲染。

收到新道具后，React会自动调用render()来更新您的组件。将所有更新都刷新到DOM后，React还会调用组件上的componentDidUpdate()，以便您有机会响应更改。正如the documentation所说：

  

将此作为在更新组件时对DOM进行操作的机会。

我建议这是根据需要调用代码的最佳位置。