Блог

У меня есть FlatList, который отображает пользовательский компонент «Card». Я передаю как keyExtractor эту функцию:

 const keyExtractor = (item) => item.id;
  

И моя функция renderItem выглядит следующим образом:

 const renderItem = ({item, index}) => <Card {...item} />
  

Мой вопрос: должен ли я передать ключ компоненту Card? Я имею в виду, должен ли я это делать

 const renderItem = ({item, index}) => <Card key={item.id} {...item} />
  

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

Конечно, если я передам ключ своему пользовательскому компоненту, я сделаю это при его реализации:

 return <View key={props.key}>...</View>
  

Спасибо.

У вас должно быть уникальное свойство в ваших данных, и вы должны использовать его в качестве ключа. Нет необходимости передавать key вашему Card компоненту.

Если ваши данные выглядят примерно так:

 data = [
  {
    id: 'a12f56e5',
    name: 'me',
    age: 24
  }
  // ...
];
  

затем вы можете использовать id в качестве ключа.

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