reactjs - 反应在父级重新渲染时闪烁并重新启动

Question

我正在尝试在组件中使用视频，但是每当重新渲染父级时（由于许多复杂的功能，在这种情况下是不可避免的），视频标签会闪烁/闪烁并重新启动。我尝试过使用 useMemo 并分离成一个单独的组件并实现 React.memo()、shouldComponentUpdate() 和扩展 PureComponent（尽管我认识到不建议使用这些来可靠地防止文档中的重新渲染）。我认为它现在与 html 视频播放器的功能或某些问题有关，因为我尝试登录组件重新渲染并且我看到的行为没有任何日志记录到控制台。在这个视觉示例中您可以在顶部看到具有此行为的组件，在底部看到另一个组件（具有几乎相同的代码），其 gif 使用图像而不是视频

let url = "url here"

const renderVideo = useMemo(
            () => (
                <video
                    src={url}
                    controls
                    muted={true}
                    autoPlay
                    height="100%"
                    width="100%"
                    style={{
                        borderRadius: "0.25rem",
                    }}
                />
            ),
            [url, keepScale, fit]
        );

        return (
            <Widget 
                {...props}
                editorContent={<EditorContent />}
                >
                {renderVideo}
               
            </Widget>
        ); 

那应该是相关的代码。这个组件很简单，复杂的功能在 Widget 组件中实现你可以看到

标签： reactjs