React Native FlatList渲染慢、API调用耗时，如何缓存旧文章或加速请求？

一、缓存旧文章实现 #

缓存是解决重复请求耗时的核心方案，推荐用MMKV（比AsyncStorage读写快10倍以上）实现本地缓存，按「分类+分页参数」作为缓存键，同时设置过期时间避免数据过时。

具体步骤： #

1. 安装MMKV：npm install react-native-mmkv
2. 请求前优先读取缓存，命中且未过期则直接返回缓存数据
3. 请求成功后将数据存入缓存，附带时间戳用于过期校验
4. 缓存过期时后台静默请求最新数据，不阻塞UI

修改后的API请求代码： #

import { MMKV } from 'react-native-mmkv';
const storage = new MMKV();

const getNewsList = async (limit, offset, categories) => {
    const cacheKey = `news_${categories}_limit_${limit}_offset_${offset}`;
    // 优先读取缓存
    const cachedData = storage.getString(cacheKey);
    if (cachedData) {
        const { data, timestamp } = JSON.parse(cachedData);
        // 缓存未过期（1小时内）直接返回
        if (Date.now() - timestamp <= 3600000) {
            return data;
        }
    }

    // 缓存失效/未命中，发起API请求
    const queryParams = { limit, offset, category: categories };
    try {
        const response = await anonymousGet(API_NEWS_LIST, queryParams);
        const payload = response.payload;
        // 写入缓存
        storage.set(cacheKey, JSON.stringify({
            data: payload,
            timestamp: Date.now()
        }));
        return payload;
    } catch (e) {
        logger.error('Error getting news list', e);
        throw e;
    }
};

二、其他请求加速优化 #

除了缓存，这些手段也能显著提升加载体验：

• 提前预加载：把onEndReachedThreshold从1调整为0.5，用户滚动到列表50%位置时就触发请求，减少等待感
• 请求防抖：对handleLoadMore做防抖处理，避免快速滚动触发重复请求
• 精简API返回：和后端协商返回仅需的字段（比如去掉不必要的富文本、冗余字段），减少数据传输量
• 启用HTTP缓存：让后端设置Cache-Control响应头，利用系统网络层缓存重复请求
• 强化请求校验：确保同一时间只有一个请求在进行，避免重复发起

修改后的关键代码： #

防抖处理加载更多：

import { debounce } from 'lodash';

// 300ms内仅触发一次加载
const handleLoadMore = debounce(() => {
    if (!loading) {
        setState((prevState) => ({
            ...prevState,
            offset: prevState.offset + 5,
            startLoadMore: true,
        }));
    }
}, 300);

调整预加载阈值：

<FlatList
    // ...其他属性
    onEndReachedThreshold={0.5} // 提前触发加载
/>

三、FlatList自身性能优化 #

• 用React.memo包裹NewsListItem，确保仅在props变化时重渲染
• 保持keyExtractor的唯一性（当前用item.id.toString()是正确做法）
• iOS端可启用removeClippedSubviews，减少不可见组件的内存占用

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