React Native组件能否预加载？视频列表加载卡顿优化咨询

为什么TikTok/Ins Reels加载如此流畅？ #

它们的核心优势在于精细化的资源调度与底层优化，并非简单的预加载：

1. 自适应码流与渐进式加载：采用HLS/DASH这类分段编码格式，先加载低清帧快速显示占位，再后台悄悄补充高清内容，避免全量加载的等待。
2. 智能预加载策略：仅预加载当前视频前后1-2个内容，且根据网络速度、用户滑动节奏动态调整预加载数量，不会无限制占用内存。
3. 原生硬件加速：直接基于平台原生视频解码能力开发（甚至自研组件），绕过RN封装层的性能损耗，充分利用GPU/硬件解码器。
4. 严格的内存管理：不可见的视频实例会被立即销毁，释放解码器、内存资源，避免Android设备因内存占用过高导致卡顿。

能否预加载全屏内容？不建议！ #

预加载所有全屏视频会直接打爆内存（尤其是Android 6GB RAM设备），反而加剧卡顿。正确的做法是预加载当前视频相邻的1-2个内容，既保证滑动流畅，又不占用过多资源。

针对你的代码的具体优化方案 #

1. 修正FlashList渲染参数（核心优化）

你的当前配置存在内存过载问题，调整后大幅降低初始渲染压力：

• initialNumToRender 从10改为1：仅渲染初始可见的1个视频
• windowSize 从5改为3：仅保持当前+前后各1个视频在内存中
• removeClippedSubviews 改为true：自动销毁不可见的组件实例，释放内存
• estimatedItemSize 设为屏幕高度：减少列表重计算的性能损耗

2. 实现可见性驱动的视频加载与预加载

通过Viewability跟踪可见项，仅给可见/即将可见的视频加载资源，不可见视频直接释放资源：

修改后的VideoPlayer组件：

import React, { useRef, useEffect } from 'react';
import { View } from 'react-native';
import Video from 'react-native-video';

const VideoPlayer = ({ video, shouldLoad }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    if (shouldLoad) {
      // 加载并准备播放
      videoRef.current?.load();
    } else {
      // 暂停并释放解码器资源
      videoRef.current?.pause();
      videoRef.current?.release();
    }
  }, [shouldLoad]);

  return (
    <View style={{ flex: 1 }}>
      <Video
        ref={videoRef}
        source={shouldLoad ? video : null} // 不加载时置空source
        resizeMode="cover"
        repeat
        paused={!shouldLoad}
        hardwareAcceleration="auto" // 启用硬件加速
        style={{ width: '100%', height: '100%' }}
      />
    </View>
  );
};

export default React.memo(VideoPlayer); // 用memo减少重渲染

修改后的FlashList主组件：

import React, { useState, useMemo, useCallback } from 'react';
import { View, Dimensions } from 'react-native';
import { FlashList, ViewabilityConfig } from '@shopify/flash-list';
import VideoPlayer from './VideoPlayer';

const { height: screenHeight } = Dimensions.get('window');

const Video = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [visibleIndices, setVisibleIndices] = useState(new Set());

  // 固定视频数据，无需依赖currentIndex
  const data = useMemo(() => [
    require('./videos/video1.mp4'),
    require('./videos/video2.mp4'),
    require('./videos/video3.mp4'),
    require('./videos/video4.mp4'),
    require('./videos/video5.mp4'),
    require('./videos/video6.mp4'),
    require('./videos/video7.mp4'),
  ], []);

  // 跟踪可见项
  const onViewableItemsChanged = useCallback(({ viewableItems }) => {
    const newVisibleIndices = new Set(viewableItems.map(item => item.index));
    setVisibleIndices(newVisibleIndices);
    if (viewableItems.length > 0) {
      setCurrentIndex(viewableItems[0].index);
    }
  }, []);

  const renderItem = useCallback(({ item, index }) => {
    // 可见项 + 前后各1项预加载
    const shouldLoad = visibleIndices.has(index) || Math.abs(index - currentIndex) <= 1;
    return (
      <View style={{ height: screenHeight, width: '100%' }}>
        <VideoPlayer video={item} shouldLoad={shouldLoad} />
      </View>
    );
  }, [currentIndex, visibleIndices]);

  const viewabilityConfig: ViewabilityConfig = {
    itemVisiblePercentThreshold: 50, // 视频显示50%时判定为可见
  };

  return (
    <View style={{ flex: 1, backgroundColor: 'pink' }}>
      <FlashList
        data={data}
        removeClippedSubviews={true}
        keyExtractor={(item, index) => index.toString()}
        renderItem={renderItem}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        snapToAlignment="center"
        decelerationRate="fast"
        disableIntervalMomentum
        initialNumToRender={1}
        windowSize={3}
        snapToInterval={screenHeight}
        maxToRenderPerBatch={1}
        updateCellsBatchingPeriod={100}
        scrollEventThrottle={16}
        pagingEnabled
        viewabilityConfig={viewabilityConfig}
        onViewableItemsChanged={onViewableItemsChanged}
        estimatedItemSize={screenHeight}
      />
    </View>
  );
};

export default Video;

3. 额外优化建议

• 开启Hermes引擎：在Android的build.gradle中启用Hermes，提升JS执行速度，减少卡顿。
• Android硬件加速：在AndroidManifest.xml的Activity标签中添加android:hardwareAccelerated="true"，强制启用硬件解码。
• 避免本地require加载：如果是远程视频，直接用uri地址；本地视频可提前复制到缓存目录，减少资源读取开销。

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