React - 生命周期和ComponentDidMount的使用

Question

我正在进行一个完整的堆栈反应项目 - 前端有graphql和apollo的节点后端。它是你管的简化克隆。使用react路由器，我有一条路由/video/${video-id}。我解析id并使用apollo从mlab数据库中提取信息，包括aws s3上视频文件的url。无论如何，我已经在componentDidMount中设置了一些功能 - 包括总视图的增量，将视频调整到特定时间等等。现在，当我链接到{{1}的视频时这很有用。 } route ...

我在设置视频列表时遇到了问题。想象一下youtube，屏幕的75％是视频，25％是缩略图链接的垂直列表。现在，当我点击缩略图时，一切都在表面上起作用，但由于视频网址只是一个状态componentDidMount没有被触发，并且我要触发的很多函数都没有被触发。

我该怎么办？我不确定提供什么代码可以提供帮助，这更像是一个生命周期问题，或者我认为一个重要的问题可以解决战略问题。现在我正在研究其他生命周期函数 - 可能添加一个条件来检测视频的URL的变化，然后在每个视频的基础上执行我想要的这些特定功能。

任何想法都表示赞赏。

Answer 1

除了componentDidUpdate之外，您还可以使用componentDidMount。如果该组件的视频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 />，同时仍然将网址存储在父组件的状态中。

渲染视频组件时，请将网址作为键，并在每次更改网址值时触发视频组件的componentDidMount生命周期方法。

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

我更喜欢使用componentDidUpdate，因为它只执行一次，而在componentDidUpdate中，它会在任何更改时重新评估，甚至是对组件的无关更改。