React Native中FlatList移除extraData属性仍正常运行的原因是什么

你遇到的这个现象是App组件自身重渲染连带FlatList触发更新导致的，和extraData没有关系，具体原因如下：

1. 当你点击条目触发setSelectedId时，selectedId是App组件内部的state，state变更会触发整个App组件重新渲染
2. 你的代码里renderItem函数没有做任何引用稳定化处理（比如用useCallback包裹），每次App重渲染时都会生成一个全新的renderItem函数引用
3. FlatList本身会对接收的props做浅比较来判断是否需要重渲染，当检测到renderItem prop的引用发生变化时，就会自动触发重渲染流程，所以此时不需要额外通过extraData来告知更新

只有当你对renderItem做了性能优化、保证它的引用不会随着无关state变化而改变时，才必须要加extraData来传递FlatList渲染依赖的外部变量。比如下面的写法如果删掉extraData，点击后条目就不会变色：

import React from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';

export default function App() {
  const [selectedId, setSelectedId] = React.useState(null);

  const items = [
    {
      id: 'some-unique-id',
      title: 'Item 1',
    },
  ];

  // 用useCallback包裹后，依赖项为空则renderItem引用永远不变
  const renderItem = React.useCallback(({ item }) => {
    return (
      <SelectableItem
        selected={selectedId === item.id}
        onPress={() => setSelectedId(item.id)}
      />
    );
  }, []);

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      // 这里必须加extraData，否则FlatList检测不到任何prop变化，不会重渲染
      extraData={selectedId}
    />
  );
}

function SelectableItem({ selected, onPress }) {
  return (
    <TouchableOpacity
      style={{ backgroundColor: selected ? 'red' : 'white' }}
      onPress={onPress}>
      <Text>Click Me!</Text>
    </TouchableOpacity>
  );
}

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