如何阻止FlatList点击后重渲染并避免滚动至顶部

1. 提取独立Item组件并做缓存优化 #

把原renderItem内的内容抽成单独组件，用React.memo包裹，仅当item本身或选中状态变化时才重渲染，避免全列表item刷新：

const BrandItem = React.memo(({ item, isSelected, isDarkMode, colors, onToggle }) => {
  return (
    <TouchableOpacity
      style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}
      onPress={() => onToggle(item.brandID)}
    >
      {isSelected ? (
        <Image
          source={require('../../assets/icons/check.png')}
          tintColor={isDarkMode ? "white" : 'black'}
          style={{
            resizeMode: 'contain',
            width: 18,
            height: 13,
            tintColor: isDarkMode ? 'white' : null
          }}
        />
      ) : (
        <View
          style={{
            width: 20,
            height: 20,
            borderRadius: 50,
            borderWidth: 1,
            borderColor: colors.primaryColor,
          }}
        />
      )}
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          flex: 1,
          borderBottomWidth: 1,
          borderColor: '#D0D0D0',
          padding: 5,
        }}>
        <Text
          style={{
            fontSize: 18,
            marginLeft: 10,
            color: isSelected ? (isDarkMode ? "white" : '#121212') : '#747474'
          }}>
          {item.name}
        </Text>
      </View>
    </TouchableOpacity>
  );
}, (prevProps, nextProps) => {
  // 自定义浅比较，仅在选中状态或item变化时重渲染
  return prevProps.isSelected === nextProps.isSelected && prevProps.item === nextProps.item;
});

2. 优化状态更新逻辑，规避闭包陷阱 #

把点击切换逻辑提取为独立函数，用useCallback缓存，同时使用函数式状态更新获取最新状态，避免闭包导致的状态错误：

const handleToggleBrand = React.useCallback((brandId) => {
  setSelectedBrand(prevSelected => {
    const newSelected = prevSelected.includes(brandId)
      ? prevSelected.filter(id => id !== brandId)
      : [...prevSelected, brandId];
    
    // 用函数式更新filterPayload，确保拿到最新的过滤参数
    setFilterPayload(prevFilter => ({
      ...prevFilter,
      brandIds: newSelected
    }));
    return newSelected;
  });
}, []);

3. 配置FlatList关键属性，解决复用和滚动问题 #

• 添加keyExtractor：给每个item分配唯一标识，确保FlatList正确复用组件，避免闪烁
• 配置maintainVisibleContentPosition：阻止状态变化后滚动位置重置到顶部

<FlatList
  data={brands}
  keyExtractor={(item) => item.brandID.toString()} // 用唯一的brandID作为key
  renderItem={({ item }) => (
    <BrandItem
      item={item}
      isSelected={selectedBrand.includes(item.brandID)}
      isDarkMode={isDarkMode}
      colors={colors}
      onToggle={handleToggleBrand}
    />
  )}
  extraData={selectedBrand}
  maintainVisibleContentPosition={{
    minIndexForVisible: 0,
    autoscrollToTopThreshold: 10
  }}
/>

4. 修正BrandTab的useCallback依赖 #

补充isDarkMode、colors、handleToggleBrand到依赖数组，确保useCallback能正确缓存组件：

const BrandTab = React.useCallback(() => {
  return (
    <View style={{ flex: 1, padding: 10 }}>
      {/* 上述优化后的FlatList */}
    </View>
  );
}, [brands, selectedBrand, isDarkMode, colors, handleToggleBrand]);

问题根源总结 #

• 原renderItem函数定义在BrandTab内部，selectedBrand变化时会重新创建，导致全列表item强制重渲染
• 状态更新未使用函数式写法，存在闭包陷阱，可能引发状态错误和额外重渲染
• 未配置keyExtractor，FlatList无法正确复用item，导致滚动闪烁
• 缺少滚动位置保留配置，状态变化后FlatList自动跳回顶部

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