Можно ли использовать Math.random() для генерации этих ключей при создании уникальных ключей для компонентов?

Проблема заключается в следующем:

У меня есть данные в виде списка из нескольких тысяч элементов. Некоторые из них являются дубликатами, и тогда может быть и возможность дублирования ключей. Поскольку у меня нет реального "идентификатора" или чего-либо, что дало бы мне возможность предоставить всем элементам их идентификатор в качестве уникальных ключей, можно ли вместо этого использовать Math.random()?

Насколько я понял, ключи в основном используются, чтобы реагировать на дифференциацию компонентов. Я думаю, насколько я действительно не имею никакого отношения к ключам в моем коде, это должно прекратиться? Чтобы гарантировать, что не будет дублированного числа, я мог бы также разделить две математические randoms друг с другом, чтобы получить почти наверняка уникальный ключ.

Это хорошая практика? Могу ли я использовать это, не беспокоясь ни о чем?

Ответ 1

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

Также, если вы переупорядочиваете свой список компонентов, использование индекса как ключа не будет очень полезно, так как React не сможет просто перемещаться по существующим узлам DOM и вместо этого придется повторно их рендерить, что снова будет иметь субоптимальную производительность, но в этом случае только при повторном заказе списка, поэтому в вашем случае я бы предпочел использовать индекс вместо Math.random, при условии, что вы не планируете менять порядок в списке путь.

Если вы намереваетесь переупорядочить список, я бы сгенерировал уникальные идентификаторы для ваших объектов, если ранее не существовало уникальных идентификаторов, которые вы можете использовать.

Быстрый способ добавления идентификаторов - это просто сопоставить коллекцию и присвоить индекс каждому элементу при первом получении (или создании) коллекции, например.

const myItemsWithIds = myItems.map((item, index) => { ...item, myId: index });

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

Ответ 2

От отредактировать документацию:

Если вы не предоставляете стабильные ключи (например, используя Math.random()), все поддеревья будут повторно отображаться каждый раз. Предоставляя пользователям выбор выбора ключа, у них есть возможность стрелять в ногу.

Ответ 3

Просто реализуйте следующий код в своем реагирующем компоненте...

constructor( props ) {
    super( props );

    this.keyCount = 0;
    this.getKey = this.getKey.bind(this);
}

getKey(){
    return this.keyCount++;
}

... и вызовите this.getKey() каждый раз, когда вам нужен новый ключ, например:

key={this.getKey()}

Ответ 4

Ключи должны быть стабильными, предсказуемыми и уникальными. Нестабильные ключи (например, созданные Math.random()) приведут к излишнему повторению многих экземпляров компонентов и узлов DOM, что может привести к ухудшению производительности и потерям в дочерних компонентах.

https://facebook.github.io/react/docs/reconciliation.html