React状态更新时如何避免HTML Video元素及iframe发生刷新？

你遇到的HTML video、iframe元素被刷新重置的核心原因是React重渲染时触发了对应DOM节点的卸载与重建，React的Diff算法判定该元素为新节点，会直接销毁旧节点后重新生成，因此原有的播放进度、滚动位置等原生状态会全部丢失。

• 移除动态key属性：不要给video/iframe元素绑定会随章节状态变化的key值，key属性变化会直接触发元素重建，将key设置为固定不变的常量即可。
• 抽离独立纯组件：把video/iframe单独封装为组件，用React.memo包裹，只要传入的props没有变化就不会触发重渲染。章节相关的state放在父组件管理，仅将必要的章节跳转等方法通过props传递给视频组件。
  示例代码：

  // 独立的视频组件
  const VideoPlayer = React.memo(forwardRef(({ src }, ref) => {
    const videoRef = useRef(null);
    // 对外暴露跳转方法
    useImperativeHandle(ref, () => ({
      jumpToChapter: (time) => {
        videoRef.current.currentTime = time;
      }
    }))
    return <video ref={videoRef} src={src} controls />
  }))
  

• 用ref操作原生DOM：章节跳转等操作直接通过useRef拿到的原生video实例修改currentTime属性，不要通过更新state触发重渲染来控制视频状态，避免多余的重渲染。
• 缓存动态属性：如果需要动态设置src等属性，用useMemo缓存属性值，避免每次重渲染生成新的属性值触发元素更新。
• 用Portal解耦：如果当前组件的重渲染逻辑无法优化，可以将video/iframe通过React.createPortal挂载到组件树之外的独立DOM节点，彻底和当前组件的重渲染逻辑隔离。

你可以打开浏览器的开发者工具，选择「元素」面板定位到video/iframe元素，触发章节状态更新时观察对应DOM节点是否会闪烁，如果闪烁则证明节点确实被重建，按照上述方案排查即可。

内容的提问来源于stack exchange，提问作者Nuintee