React Native FlashList选中联系人时闪烁问题求助

问题描述 #

我用FlashList展示设备原生通讯录的联系人列表，需求是选中联系人时，对应项显示复选框选中状态。但每次选择时FlashList会闪烁，换成React Native FlatList就没问题，这明显是FlashList的特有问题。

我已经通过keyExtractor定义了唯一key，也用选中数据设置了extraData属性，按文档说明这应该能解决问题，但并未生效，求帮忙。

组件视图 #

<View style={{ display: 'flex', flex: 1, width: '100%', flexDirection: 'column' }}>
  <View style={{ flex: 1, width: '100%' }}>
    <FlashList
      data={contacts}
      keyExtractor={(item, index) => `${item.id}-${index}`}
      ref={contactList}
      extraData={selectedContacts}
      renderItem={renderItem}
      estimatedItemSize={100}
    />
  </View>
</View>

组件代码 #

const contactList = useRef()
const [selectedContacts, setSelectedContacts] = useState<string[]>([]);

const renderItem = ({ item }) => (
  <ContactListResult item={item}
                     onPress={() => toggleSelection(item)}
                     selectable={true}
                     selected={selectedContacts.indexOf(item.id) >= 0}
  />
);

const toggleSelection = (item : ConnectionListItem) => {
  let currentList = [...selectedContacts];
  if (currentList.includes(item.id)) {
    currentList.splice(currentList.indexOf(item.id), 1)
  } else {
    currentList.push(item.id)
  }
  setSelectedContacts(currentList)
}

解决方法 #

1. 优化keyExtractor，移除index依赖 #

FlashList对key的稳定性要求比FlatList更高，依赖index生成key会导致列表项状态变化时key不稳定，直接使用唯一的item.id即可：

keyExtractor={(item) => item.id}

2. 用不可变方式更新selectedContacts #

避免使用splice这类修改原数组的方法，改用不可变操作确保状态更新的可预测性，减少不必要的重渲染触发：

const toggleSelection = (item) => {
  setSelectedContacts(prev => {
    return prev.includes(item.id) 
      ? prev.filter(id => id !== item.id) 
      : [...prev, item.id];
  });
};

3. 子组件用React.memo优化渲染 #

确保ContactListResult不会因无关props变化触发重渲染，用React.memo包裹子组件：

const ContactListResult = React.memo(({ item, onPress, selectable, selected }) => {
  // 原组件内容
});

4. 精准设置estimatedItemSize #

如果estimatedItemSize和实际item高度差距过大，会引发布局重排导致闪烁，尽量设置和实际列表项高度一致的值。

5. 临时关闭removeClippedSubviews排查 #

尝试关闭视图裁剪功能，排查是否是该优化逻辑导致的闪烁（注意此操作可能影响列表性能，仅用于排查）：

<FlashList
  // 其他属性
  removeClippedSubviews={false}
/>

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