React Native - 無法理解 FlatList extraData 道具的目的

Question

我知道 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',
    },
  ];

  const renderItem = ({ item }) => {
    return (
      <SelectableItem
        selected={selectedId === item.id}
        onPress={() => setSelectedId(item.id)}
      />
    );
  };

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      extraData={selectedId} // works the same if I remove this
    />
  );
}

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

當 FlatList 狀態發生變化時，我已經考慮重新渲染組件來實現它......

在這里測試一下。

但是，如果我刪除額外的數據道具，代碼的工作方式相同......為什么？

Answer 1

正如文件所暗示的那樣

通過將 extraData 傳遞給 FlatList 我們確保 FlatList 將在狀態時重新呈現自身。 選定的更改。 如果沒有設置這個 prop，FlatList 不會知道它需要重新渲染任何項目，因為它也是一個 PureComponent，並且 prop 比較不會顯示任何更改。

我認為這是因為您的狀態正在更改組件已更新但在所有情況下，這是不可能的，如果您想更改數組並且它不會影響組件不會更新的狀態並且平面列表將是相同的。 我們正在使用一個額外的數據道具來通知平面列表數據已更改，它應該重新渲染。