Question

我正在将视频组件集成到我的页面中，该页面根据其父对象的状态从DOM中插入和删除。无论何时安装视频组件，它都会使用道具video-id来调用我正在使用的视频托管服务的第三方API Brightcove，该API会为视频返回一个src并设置视频播放器。我的组件看起来像这样：

componentDidMount() {
    bc(this.videoRef.current);  // brightcove initialization script
    const player = videojs(this.videoRef.current);
}

render() {
    return (
        <video
            ref={this.videoRef}
            data-video-id={this.props.videoId} >
        </video>
    );
}

此处是如何加载Brightcove视频的示例：https://codepen.io/team/rcrooks1969/pen/JywoKE

我的问题是，每次卸载并再次安装此组件时，都必须调用API来重新设置视频。我不能只缓存返回的src，因为API不仅可以获取视频的src（请参阅codepen示例）。

有人知道即使卸载后我仍然可以缓存整个DOM元素，还是有其他避免每次调用API的方法？

在React中缓存第三方API调用

0 个答案: