Javascript 在React Native/Expo上同时渲染多个视频的更优化方式？

我正在开发一个基于视频的应用程序。我一次只显示一个视频，但同时渲染多个视频

我一次渲染多个视频的原因是，用户可以在不等待加载第二个视频的情况下从一个视频转到第二个视频

我是一个新的本地人，并且开始面临渲染太多视频的性能问题。有没有一种比下面的方式更好的渲染方式

我真的不知道我是在更改应该是不变的数据，还是在避免不必要的重新渲染

我首先设置一个恒定的renderedVideos

const renderedVideos = []; 

   renderedVideos.push(
      <Video
            ref={playbackObject}
            source={{uri: source}}
            rate={1.0}
            volume={1.0}
            isMuted={isMuted}
            resizeMode="cover"
            usePoster={true}
            shouldPlay={shouldPlay}
            onPlaybackStatusUpdate={_onPlaybackStatusUpdate}
            progressUpdateIntervalMillis={50}
            isLooping
            style={videoStyle}
            >
        </Video>
   ) 

我有一些逻辑来处理一些查询的数据。我最终将每个视频组件推送到渲染视频阵列中

const renderedVideos = []; 

   renderedVideos.push(
      <Video
            ref={playbackObject}
            source={{uri: source}}
            rate={1.0}
            volume={1.0}
            isMuted={isMuted}
            resizeMode="cover"
            usePoster={true}
            shouldPlay={shouldPlay}
            onPlaybackStatusUpdate={_onPlaybackStatusUpdate}
            progressUpdateIntervalMillis={50}
            isLooping
            style={videoStyle}
            >
        </Video>
   ) 

renderedVideos.push(
) 

然后调用视图组件中的renderedVideos

<View>
   {renderedVideos}
</View>

{渲染视频}

有没有更好的方法来渲染这些视频？非常感谢！如果您想查看整个文件，请参见下面：）

从“React”导入React，{useffect，useRef，useState}；
从“expo av”导入{视频、音频}；
从“react native”导入{View，Animated}；
导出默认函数MultipleVideos（道具）{
const renderegroup=props.limit；
让初始化索引；
让指数限制；
如果（道具优先）{
const renderIndex=Math.round（props.userIndex/renderGroup）；
initialIndex=renderIndex*renderGroup；
indexLimit=RenderIndex*RenderGroup+RenderGroup/2；
}否则{
const renderIndex=Math.floor（props.userIndex/renderGroup）；
initialIndex=RenderIndex*RenderGroup+RenderGroup/2；
indexLimit=RenderIndex*RenderdGroup+RenderdGroup；
}
const playingData={
伊斯梅特：错，
shouldPlay：道具，shouldPlay，
playbackObject:props.playbackObject，
_OnPlaybackStatus更新：道具，
显示：“flex”
}
常量非播放数据={
伊斯穆特：是的，
应该说：错，
playbackObject:null，
_OnPlaybackStatus更新：null，
显示：“无”
}
useffect（（）=>{
Audio.setAudioModeAsync({
playsInSilentModeIOS：正确
}); 
}, []);
const renderedVideos=[]；
if（道具视频数据）{
for（设i=initialIndex；i

您可以只渲染当前和下一个视频，并对每个视频重复该过程。或者在当前播放的视频上收听

timeupdate

事件，并创建一个点，例如：结束前3秒，以渲染下一个视频并对每个视频重复该点。@EmielZuurbier是否有示例代码？