使用 UUID 作为列表键会导致 React 中不必要的重新渲染吗？

Question

我有一个项目列表，其中包含的数据不足以生成唯一键。如果我使用 uuid 库生成 ID，单个项目的更改是否也会导致其他项目重新呈现，因为它们的密钥每次都会更改？

const people = [
  {
    gender: 'male',
    firstName: 'david',
  },
  {
    gender: 'male',
    firstName: 'david',
  },
  {
    gender: 'male',
    firstName: 'joe',
  },
]

const renderPeople = () => {
  return people.map(person => {
    return (
      <div key={uuid.v4() /* a new value each time? */ }>
        <p>{person.gender}</p>
        <p>{person.firstName}</p>
      </div>
    )
  })
}

一段时间后......其中一个大卫改变了

const people = [
  {
    gender: 'male',
    firstName: 'david',
  },
  {
    gender: 'male',
    firstName: 'davidzz',
  },
  {
    gender: 'male',
    firstName: 'joe',
  },
]

Answer 1

<div key={uuid.v4()}>每次<div>都分配新的密钥，所以没用。

如果数组保持不变，则应在创建数组时生成 UUID。

如果数组发生变化，例如从 HTTP 请求中接收到，具有相同内容的元素的 UUID 将再次生成。

为了避免这种情况，key应该特定于person实体。最好使用内部标识符（数据库 ID），以确保无歧义。

如果标识符不可用，key可能取决于元素内容：

return (
  <div key={JSON.stringify(person)}>
    <p>{person.gender}</p>
    <p>{person.firstName}</p>
  </div>
)

在创建数组时散列一次元素会更有效，例如uuid：

import uuidv3 from 'uuid/v3';
...

for (const person of people) {
  person.key = uuidv3(JSON.stringify(person), uuidv3.URL);
}

或者使用专用的散列函数，如object-hash.

请注意，如果存在具有相同内容的元素，散列可能会导致密钥冲突。

Answer 2

是的。钥匙应该稳定。如果不是，React 就无法推断这些项目可能完全相同，并且必须完全重新渲染它们。