React - ComponentDidMount的生命周期和使用

Question

我正在做一个全栈react项目-节点后端，前端有graphql和apollo。它是you tube的简化克隆。使用react路由器，我有一个路由/video/${video-id}。我解析了id，并使用阿波罗从mlab数据库中提取信息，包括亚马逊网络服务s3上的视频文件的url。无论如何，我已经在componentDidMount中设置了一些功能-包括增加总浏览量，将视频调整到特定的时间，等等。现在，当我从我的/channel路径链接到视频时，这个功能工作得很好…

我在设置视频列表时遇到了问题。想象一下youtube，75%的屏幕是视频，25%是缩略图链接的垂直列表。现在，当我点击缩略图时，一切都在表面上工作，但由于视频url只是状态的一部分，componentDidMount没有被触发，我想要触发的许多函数也没有被触发。

我该怎么办呢。我不确定提供代码会有什么帮助，这更多的是一个生命周期问题，或者我猜是一个大的反应策略问题。现在我正在研究其他的生命周期函数--可能会添加一个条件来检测视频的url的变化，然后在每个视频的基础上执行我想要的这些特定的函数。

任何想法都是值得感谢的。

Answer 1

除了componentDidMount之外，您还可以使用componentDidUpdate。如果组件的视频ID为this.state.videoId

componentDidUpdate(prevProps, prevState) {
  if (prevState.videoId !== this.state.videoId) {
    // Do something
  }
}

https://reactjs.org/docs/react-component.html#componentdidupdate

Answer 2

如果可能，您可以将视频转换为另一个组件，比如<VideoComponent />，同时仍然将url存储在父组件的状态中。

在呈现视频组件时，将url作为关键字提供给它，这将在每次更改URL值时触发视频组件的componentDidMount生命周期方法。

用法：<VideoComponent key={this.state.url} />

与使用componentDidUpdate相比，我更喜欢这样做，因为它只执行一次，而在componentDidUpdate中，它会在任何更改时重新计算，即使是组件的不相关更改。