React Native FlatList添加元素时重复渲染的性能优化咨询

在Android平台的React Native页面中，实现用户输入内容添加到列表顶部的功能时，FlatList出现严重性能问题：页面任何内容变化都会触发全量重渲染，添加200条数据时耗时600-1000ms，即使使用useCallback也无法解决。以下是针对性的优化方案：

1. 清理renderItemList的依赖项 #

当前renderItemList把myArray作为useCallback的依赖，而每次添加新元素时myArray都会生成新数组，直接导致renderItemList被重新创建，进而触发FlatList所有子项重渲染。直接移除myArray依赖，因为渲染单个子项只需要当前item的信息，不需要整个数组。

修改后的代码：

const renderItemList = useCallback(
  ({item, index}, someFunction) => {
    // 原有渲染逻辑保持不变
  },
  [row, someTextInputRef], // 仅保留必要依赖，移除myArray
);

2. 避免在renderItem中传递匿名函数 #

当前FlatList的renderItem里传递了匿名箭头函数() => { someFunction(item); }，每次父组件渲染都会生成新函数，导致renderItemList的参数变化，触发子项重渲染。可以用useCallback封装处理函数，稳定引用。

修改FlatList部分：

// 先封装稳定的处理函数
const handleItemAction = useCallback((item) => {
  someFunction(item);
}, [someFunction]);

// FlatList中使用封装后的函数
<FlatList
  showsVerticalScrollIndicator={true}
  data={myArray}
  renderItem={({item, index}) =>
    renderItemList({item, index}, () => handleItemAction(item))
  }
  keyExtractor={item => item.id.toString()}
  removeClippedSubviews
/>

3. 拆分列表项为独立组件并使用React.memo #

把列表项的渲染逻辑提取为单独组件，用React.memo包裹，这样只有当item或关键props变化时，组件才会重渲染，彻底避免全量更新。

示例代码：

// 独立的列表项组件，用React.memo包裹
const ListItem = React.memo(({item, index, onAction, closeRow, textInputRef}) => {
  const renderRightActions = (progress, dragX) => {
    const opacity = dragX.interpolate({
      inputRange: [-80, 0],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    });
    return (
      <Animated.View style={[styles.swipedRow, {opacity}]}>
        <Animated.View style={styles.deleteButton}>
          <Pressable style={{alignItems: 'center'}} onPress={() => onAction(item)}>
            <SvgDelete />
            <Animated.Text style={styles.deleteButtonText}>Delete</Animated.Text>
          </Pressable>
        </Animated.View>
      </Animated.View>
    );
  };

  return (
    <Swipeable
      key={item.id}
      overshootFriction={3}
      onSwipeableWillOpen={() => textInputRef?.current?.blur()}
      renderRightActions={renderRightActions}
      onSwipeableOpen={() => closeRow(index)}
      ref={ref => (row.current[index] = ref)}>
      <View>
        <View>
          <Text>#{item.index}</Text>
          <SvgDot />
          <Text>{item.id}</Text>
          <SvgDot />
          <SvgSealDot stroke={Colors.Black30} />
          <Text>ID</Text>
        </View>
        <Text>{item.desc}</Text>
      </View>
    </Swipeable>
  );
}, (prevProps, nextProps) => {
  // 自定义浅比较逻辑，仅当item内容变化时才重渲染
  return prevProps.item.id === nextProps.item.id && 
         prevProps.item.desc === nextProps.item.desc && 
         prevProps.item.index === nextProps.item.index;
});

// 父组件中使用该列表项组件
const SomePage = () => {
  // 改用useRef存储row数组，避免每次渲染创建新数组
  const row = useRef([]);
  const prevOpenedRow = useRef(null);
  const someTextInputRef = useRef(null);
  const [myArray, setMyArray] = useState<SomeType[]>([]);

  // 用useCallback稳定closeRow的引用
  const closeRow = useCallback((closeIndex: number) => {
    if (prevOpenedRow.current && prevOpenedRow.current !== row.current[closeIndex]) {
      prevOpenedRow.current.close();
    }
    prevOpenedRow.current = row.current[closeIndex];
  }, []);

  const handleItemAction = useCallback((item) => {
    // 这里写someFunction的逻辑
  }, []);

  const addItem = (item) => {
    let newData = { id: item.id, desc: item.desc, index: someCounter };
    setMyArray([newData, ...myArray]);
  };

  return (
    <View>
      {/* 页面其他内容 */}
      <FlatList
        showsVerticalScrollIndicator={true}
        data={myArray}
        renderItem={({item, index}) => (
          <ListItem
            item={item}
            index={index}
            onAction={handleItemAction}
            closeRow={closeRow}
            textInputRef={someTextInputRef}
          />
        )}
        keyExtractor={item => item.id.toString()}
        removeClippedSubviews
        // 额外优化：控制初始渲染和批量渲染数量
        initialNumToRender={10}
        maxToRenderPerBatch={5}
      />
    </View>
  );
};

4. 优化FlatList的渲染控制 #

给FlatList添加initialNumToRender和maxToRenderPerBatch属性，控制初始渲染的条目数和每次批量渲染的数量，减少一次性渲染的性能压力。

5. 减少父组件不必要重渲染 #

如果父组件会因为其他无关状态变化重渲染，可以用React.memo包裹父组件，或者把无关状态拆分到独立子组件中，降低父组件重渲染的频率。

内容的提问来源于stack exchange，提问作者Zhou Zhi Hua