Добавление новых элементов в ListView без отображения всего списка - React Native/ React js

Question

В реактивном FlatListview я хотел добавить новый элемент в список.

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

data приходит из API в добавление ключа a и б т.е. data = [{key: 'a'}, {key: 'b'},{key: 'c'}]

всякий раз, когда появляется новый ключ, он отображает весь список, и это создает некоторую проблему с производительностью.

Итак, что было бы лучшим способом визуализировать только один / два элемента, который был недавно добавлен. Это похоже на добавление двух новых элементов в просмотр списка без отображения всего списка.

Answer 1

Эта информация прямо из документов...

Более сложный пример с несколькими вариантами выбора, демонстрирующий использование PureComponent для оптимизации перфорирования и избежание ошибок.

При связывании обработчика onPressItem реквизиты останутся ===, а PureComponent предотвратит расточительные повторные рендеры, если только фактические идентификаторы, выбранные реквизиты или реквизиты заголовка не изменятся, даже если компоненты, представленные в MyListItem, не имели такой оптимизации. Передав extraData={this.state} в FlatList, мы гарантируем, что сам FlatList будет повторно визуализироваться при изменении state.selected. Без установки этого реквизита FlatList не знал бы, что ему нужно повторно визуализировать какие-либо элементы, потому что он также является PureComponent, и сравнение реквизитов не покажет никаких изменений.

https://facebook.github.io/react-native/docs/flatlist.html

Answer 2

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}

  keyExtractor={(item, index) => item.id}
/>