Изменить порядок FlatList на основе значения в содержимом

Question

Я передаю данные в свой FlatList, используя следующий код

<FlatList
  data={pubData}
  renderItem={({ item }) => (
    <Item
      id={item.id}
      name={item.name}
      lat={item.lat}
      long={item.long}
      deviceLat={deviceLat}
      deviceLong={deviceLong}
    />
  )}
  keyExtractor={(item) => item.id}
/>

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

Answer 1

Существует эмпирическое правило: старайтесь избегать вычислений внутри списка (ListItems), поскольку эти вычисления будут выполняться в каждом элементе, поэтому FlatList начнет вызывать проблемы с производительностью, если вычислений будет слишком много.

Во-вторых, всегда предоставляйте свой Final data to the FlatList, мне пришлось столкнуться с аналогичной ситуацией, когда я делал все вычисления внутри ListItem и сталкиваюсь с проблемами производительности, чем я переместил все свои вычисления в контейнер FlatList, и это работает хорошо, я не знаю вашей реализации и требований, но помните об этих вещах при работе со списками.

Answer 2

Вы можете отсортировать состояние источника данных и повторно визуализировать FlatList, но лучше выполнить все вычисления перед визуализацией данных.