React Native FlatList大表情列表性能优化及剩余警告消除

以下是针对你的场景的具体优化方案，直接落地就能解决性能问题和警告：

一、优化列表项的渲染稳定性 #

你的renderEmoji函数每次组件重渲染都会重新创建，导致所有表情项被迫无意义重渲染，这是卡顿的核心诱因。用React.memo和useCallback固定组件与回调：

1. 将表情项抽离为独立的memo组件：

import { memo } from 'react';
import { Pressable, Text } from 'react-native';

const EmojiItem = memo(({ emoji, onSelect }) => {
  return (
    <Pressable onPress={() => onSelect(emoji)}>
      <Text style={styles.emoji} size={30}>
        {emoji.char}
      </Text>
    </Pressable>
  );
});

用Pressable替代TouchableOpacity（落实你已了解的第一个优化点），并用memo包裹，只有当emoji或onSelect变化时才触发重渲染。

2. 用useCallback稳定选中回调：
   在主组件中，把表情选中逻辑包裹成稳定函数，避免每次渲染生成新函数触发EmojiItem重渲染：

const handleSelectEmoji = useCallback((emoji) => {
  setSelectedEmoji(emoji);
  setShowModal(false); // 直接设为false，比取反更稳定，避免状态不一致
}, []);

二、调整FlatList的性能参数 #

你的FlatList参数设置不合理，导致滚动时频繁渲染或布局计算开销过大：

1. 移除无效的key={6}属性，FlatList无需该属性，keyExtractor已足够标识列表项。
2. 合理设置初始渲染与批量渲染数量：
   把initialNumToRender设为可见区域能容纳的数量（比如6列×4行=24），maxToRenderPerBatch设为12，平衡首次加载速度与滚动流畅度：

initialNumToRender={24}
maxToRenderPerBatch={12}

3. 添加windowSize控制预渲染范围：
   减少预渲染的组件数量（比如设为10，默认是21），降低内存占用：

windowSize={10}

4. 启用getItemLayout（关键优化）：
   因为你的列表项是固定尺寸，用这个属性让FlatList提前计算每个item的位置，避免动态测量高度，大幅提升滚动性能：

import { Dimensions } from 'react-native';
const { width: screenWidth } = Dimensions.get('window');
const itemHeight = 50; // 根据你的emoji大小调整固定高度

// 给FlatList添加该属性
getItemLayout={(data, index) => ({
  length: itemHeight,
  offset: itemHeight * Math.floor(index / 6), // 6列布局，每行高度为itemHeight
  index,
})}

5. 确保removeClippedSubviews生效：
   给FlatList设置flex:1，让它明确可滚动区域：

<FlatList
  style={{ flex: 1 }}
  // ...其他属性
/>

三、其他细节优化 #

1. 稳定打开/关闭Modal的回调：

const handleOpenModal = useCallback(() => {
  setShowModal(true);
}, []);

const handleCloseModal = useCallback(() => {
  setShowModal(false);
}, []);

同时把主组件中的TouchableOpacity替换为Pressable：

<Pressable onPress={handleOpenModal}>
  <Text size={30}>{selectedEmoji.char}</Text>
</Pressable>

2. 确保表情数组引用稳定：
   如果emojis是每次组件渲染都重新创建的数组，会导致FlatList误判数据变化而重渲染所有项。用useMemo缓存数组：

const stableEmojis = useMemo(() => emojis, []);
// 然后FlatList的data={stableEmojis}

优化后的完整代码示例 #

import { useState, useCallback, memo, useMemo } from 'react';
import { Pressable, Text, FlatList, Dimensions } from 'react-native';
import { SwipeableModal } from './你的Modal路径'; // 替换为实际路径

const { width: screenWidth } = Dimensions.get('window');
const itemHeight = 50;

const EmojiItem = memo(({ emoji, onSelect }) => {
  return (
    <Pressable onPress={() => onSelect(emoji)}>
      <Text style={styles.emoji} size={30}>
        {emoji.char}
      </Text>
    </Pressable>
  );
});

export const EmojiPicker = () => {
  const [showModal, setShowModal] = useState(false);
  const [selectedEmoji, setSelectedEmoji] = useState(() => {
    const random = Math.floor(Math.random() * emojis.length);
    return emojis[random];
  });

  const handleSelectEmoji = useCallback((emoji) => {
    setSelectedEmoji(emoji);
    setShowModal(false);
  }, []);

  const handleOpenModal = useCallback(() => {
    setShowModal(true);
  }, []);

  const handleCloseModal = useCallback(() => {
    setShowModal(false);
  }, []);

  const stableEmojis = useMemo(() => emojis, []);

  const renderItem = useCallback(({ item }) => {
    return <EmojiItem emoji={item} onSelect={handleSelectEmoji} />;
  }, [handleSelectEmoji]);

  return (
    <>
      <Pressable onPress={handleOpenModal}>
        <Text size={30}>{selectedEmoji.char}</Text>
      </Pressable>
      <SwipeableModal
        isVisible={showModal}
        onClose={handleCloseModal}
      >
        <FlatList
          data={stableEmojis}
          renderItem={renderItem}
          numColumns={6}
          initialNumToRender={24}
          maxToRenderPerBatch={12}
          windowSize={10}
          removeClippedSubviews={true}
          keyExtractor={(item) => item.codes}
          getItemLayout={(data, index) => ({
            length: itemHeight,
            offset: itemHeight * Math.floor(index / 6),
            index,
          })}
          style={{ flex: 1 }}
        />
      </SwipeableModal>
    </>
  );
};

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