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

Question

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

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

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

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

最好的方法是什么？

Answer 1

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

收到新道具后,React会自动调用render()以更新您的组件.将所有更新都刷新到DOM后,React也会调用componentDidUpdate()您的组件,以便您有机会响应更改.正如文件所说:

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

我建议这是根据需要调用代码的完美场所.