为 ReactJS 键生成顺序 ID

Question

React 要求您在数组中的元素上具有唯一的 key 属性。 React docs 建议使用数据中的 id。如果您没有id，那么您可以将数组索引用作“最后的手段”，但需要注意的是，当可以重新排序项目时，使用索引可能会导致性能问题。在从多个源数组构建元素数组并多次调用.map() 时，我也遇到了一些烦人的问题，每次调用都有不同的转换，在这种情况下，数组索引无论如何都不会是唯一的。

我已经开始在我的组件中加入以下样板：

constructor(props) {
    super(props);
    this.getId = this.getId.bind(this);
    this.id = 0;
}

getId() {
    return this.id++;
}

可以这样使用：

render() {
    const items = this.props.greetings.map(text => ({
        <li key={this.getId()}>{text}</li>
    }));

    return (
        <ul>
          {items}
        </ul>
    );
}

这很简单，速度很快，并且没有使用数组索引的问题，但我不知道这种方法是否有任何问题，或者我忽略了更好的替代方案。这是不好的做法吗？还有其他没有数组索引问题的生成keys 的简单方法吗？

Answer 1

这是Reconciliation 上的文档在键上所说的内容

在实践中，找到密钥通常并不难。您要显示的元素可能已经有一个唯一的 ID，因此密钥可以来自您的数据。 如果不是这种情况，您可以将新的 ID 属性添加到模型中或对部分内容进行哈希处理以生成密钥。密钥只需要在其兄弟姐妹中是唯一的，而不是全局唯一的。 作为最后的手段，您可以将数组中项目的索引作为键传递。如果项目从不重新排序，这可以很好地工作，但重新排序会很慢。

所以我认为您正在遵循建议的方法。