我应该使用uuid()在React组件内动态提供id吗

众所周知,由于性能问题,我们不应该使用数组的索引作为React组件键,因为修改它会无故重新渲染太多组件。

查阅 https://reactjs.org/docs/reconciliation.html#recursing-on-children

所以我在想,为什么不在映射时使用UUID呢:

import { v4 as uuidv4 } from 'uuid';

function ListItem(props) {
  return <li key={props.id}>{props.value}</li>;
}

function MyList(props) {
  const listItems = props.items.map(item =>
    <ListItem key={uuidv4()} value={item.value} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const items = [{ value: 'item 1' }, { value: 'item 2' }, { value: 'item 3' }];

ReactDOM.render(
  <MyList items={items} />,
  document.getElementById('root')
);

但我认为这是同样的问题,因为每次MyList组件重新发布时,它都会为每个项目重新生成一个新的密钥,然后这种技术就没有任何好处了。

因此,医生建议: “如果不是这样,您可以向模型中添加一个新的ID属性,或者对内容的某些部分进行哈希处理以生成密钥。密钥只需要在其兄弟项中是唯一的,而不是全局唯一的。” 因为哈希每次都是相同的id,前提是我们不添加盐。

最后,我对这个问题有正确的理解吗?