Expo Video-av组件播放时持续重渲染问题咨询

Hey there! Let's figure out what's going on with your component's constant rerenders and how to fix it.

为什么会出现持续重渲染？ #

首先，这个现象其实和你使用的onPlaybackStatusUpdate回调直接相关：

• Expo的Video组件在播放过程中，会频繁触发onPlaybackStatusUpdate（每秒可能多次），用来返回当前的播放状态（比如进度、缓冲情况、播放状态等）。
• 在你的代码里，每次这个回调触发都会调用setStatus更新组件的status状态——哪怕你根本没在组件里用到这个status变量！状态更新必然会触发组件重渲染，这就导致了视频播放时组件一直重复渲染的问题。
• 而当你暂停视频时，播放状态不再频繁变化，onPlaybackStatusUpdate的触发频率骤降，所以重渲染也就停止了。这完全符合逻辑，但确实是可以优化的不必要行为。

怎么解决这个问题？ #

根据你的需求，有两种针对性的优化方案：

1. 如果你不需要跟踪播放状态（当前代码里确实没用到status）

最直接的办法就是移除不必要的状态更新逻辑：

• 删除const [status, setStatus] = useState({});这一行
• 去掉Video组件上的onPlaybackStatusUpdate={setStatus}属性

这样就不会因为无意义的状态更新触发重渲染了，视频播放也不会受影响。

2. 如果你确实需要跟踪部分播放状态

如果之后你需要用到播放状态（比如判断是否在播放、显示进度条等），不要每次都更新整个状态对象，而是只提取你需要的属性，并且减少状态更新的频率：

import { useCallback, useState } from "react";

// 只定义你需要的状态字段
const [isPlaying, setIsPlaying] = useState(true);

// 用useCallback缓存回调，避免每次重渲染都创建新函数
const handlePlaybackStatusUpdate = useCallback((newStatus) => {
  // 只在播放状态真正改变时更新状态，而不是每次进度变化都更新
  if (newStatus.isPlaying !== isPlaying) {
    setIsPlaying(newStatus.isPlaying);
  }
}, [isPlaying]);

// 在Video组件里使用这个优化后的回调
<Video
  // ...其他属性
  onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
/>

额外小提醒 #

你代码里的isVideoLoaded状态逻辑是没问题的，它只会在视频开始加载和准备显示时各触发一次，不会导致持续重渲染，可以继续保留。

之前你尝试用useCallback和useEffect没效果，大概率是因为没找到问题的根源——也就是那个无意义的setStatus调用。调整之后应该就能解决持续重渲染的问题啦！

备注：内容来源于stack exchange，提问作者Taylor