React Native结合MMKV存储：如何在FlatList中展示大量数据？

核心思路 #

MMKV本身提供了getAllKeys()方法获取所有存储的键名，结合get(key)就能把分散的键值对转换成FlatList需要的数组结构，再直接渲染即可。

具体实现步骤 #

1. 从MMKV中提取所有数据

先初始化MMKV实例，然后通过遍历所有键名，把每个键对应的值组装成包含唯一ID（这里用uuid作为ID）的数组：

import { MMKV } from 'react-native-mmkv';

// 初始化MMKV实例
const storage = new MMKV();

// 封装获取所有数据的方法
const getAllStoredItems = () => {
  const allKeys = storage.getAllKeys();
  // 把键值对转成[{id: uuid, content: 存储值}]的格式
  return allKeys.map(key => ({
    id: key,
    content: storage.get(key)
  }));
};

2. 在组件中结合FlatList渲染

用状态管理数据，组件挂载时获取所有数据，还可以监听MMKV的变化实现实时更新：

import React, { useState, useEffect } from 'react';
import { View, FlatList, Text, StyleSheet } from 'react-native';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

const ItemListScreen = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // 组件加载时拉取所有数据
    const initialItems = getAllStoredItems();
    setItems(initialItems);

    // 可选：监听MMKV数据变化，自动更新列表
    const updateListener = storage.addOnValueChangedListener(() => {
      setItems(getAllStoredItems());
    });

    // 组件卸载时移除监听
    return () => updateListener.remove();
  }, []);

  const getAllStoredItems = () => {
    const allKeys = storage.getAllKeys();
    return allKeys.map(key => ({
      id: key,
      content: storage.get(key)
    }));
  };

  // FlatList的单个Item渲染函数
  const renderItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <Text style={styles.itemText}>{item.content}</Text>
    </View>
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id} // 直接用uuid作为唯一标识
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0'
  },
  itemText: {
    fontSize: 16
  }
});

export default ItemListScreen;

针对大量数据的优化建议 #

如果存储的数据量极大（比如数千条），一次性全量加载可能影响性能，可以做这些优化：

• 分页加载：利用FlatList的onEndReached事件，每次只加载20-50条数据，滚动到底部时再加载下一批（需要自己维护已加载的键索引）
• 避免重复计算：把获取到的数据缓存到状态中，只在MMKV数据变化时重新生成数组
• 内存优化：如果数据不需要全量缓存，可以考虑按需读取单个键对应的数据

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