Reactjs 反应<；视频/>；在父重渲染器上闪烁并重新启动

我试图在组件中使用视频，但每当重新播放父级时（在这种情况下，由于许多复杂的功能，不可避免），视频标签就会闪烁/闪烁并重新启动。我曾尝试使用useMemo并将其分离为一个单独的组件，并实现React.memo（）、shouldComponentUpdate（）和扩展PureComponent（尽管我认识到不建议使用这些组件来可靠地防止文档中的重新加载）。我现在认为html视频播放器的功能有问题，因为我尝试登录components rerender，并且在没有任何控制台日志的情况下看到了这种行为。在图中，您可以在顶部看到具有此行为的组件，在底部看到另一个具有gif的组件（其代码几乎相同），该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>
        ); 

let url=“url here”
const renderVideo=useMemo(
() => (
),
[url、keepScale、fit]
);
返回(
{renderVideo}
); 

---

这应该是相关代码。该组件非常简单，复杂的功能在您可以看到的小部件组件中实现

您的父组件强制您的子组件重新渲染，您的修复程序很可能位于父组件中，您需要找出导致重新启动的原因-render@SeanWkeepScale和fit是为了简化而从代码中删除的属性，只是忘了从dep数组中删除。这没什么区别。@gandharvgarg父母的重新恋情是不可避免的，这是一些行为所必需的。当父级重新渲染时，下面带有gif的组件不存在此问题，并保持其外观，没有闪烁mm看起来像onMouseOver视频重置。。。尝试在上提供一个onMouseOver事件处理程序，onMouseOver={e=>{}}@gandharvgarg添加该处理程序没有任何区别