Reactjs - 如何在重用组件中正确处理键值

Question

我最近开始学习Reactjs，我觉得它非常有趣。键（Keys）是关于身份的，因此通过唯一的键来识别每个组件是正确的方法，对吗？ 假设我有这个例子：

var fruits = [
  {'fruitId': 351421, 'fruit': 'banana'},
  {'fruitId': 254134, 'fruit': 'apple'},
  {'fruitId': 821553, 'fruit': 'orange'}
];

React.DOM.ul(null, fruits.map(function(item) {
  return (
    React.DOM.li({
      key: item.fruitId
    }, item.fruit)
  );
}));

请注意大型ID号码。现在，我的问题是是否最好使用数字作为ID还是像哈希值一样使用字符串作为ID？谢谢！

- Mauro Gava

Answer 1

实际上，唯一重要的是该键在父元素的同级元素中是唯一的。它不必在整个应用程序中都是唯一的，只需在您附加这些项的父级内部。

通常对于简单的元素迭代，例如<li>或<option>，仅使用迭代器中的索引就足够了。

例如:

var options = [];
for (var i=0; i<this.props.options.length; i++) {
    var option = this.props.options[i];
    options.push(
        <option key={i} value={option.value}>{option.name}</option>
    );
}

唯一不适用的情况是，如果您稍后以不同的顺序添加/删除键入元素，那么您的键可能会与另一个兄弟节点发生冲突。在这种情况下，您需要以其他方式生成密钥以确保它是唯一的 - 或者使用模型中已知的唯一密钥。无论您如何做到，只要它在其兄弟姐妹中是唯一的，就没问题。

- Mike Driver

Answer 2

正如 @Mike 所说，它们仅用于在添加/删除列表时保留真实 DOM 元素的顺序。 它们只需要在本地组件中是唯一的，因此可以重复使用数据中的自然 id。 我不会使用迭代器中的索引，因为这样做可能会导致问题。

关于数字与字符串：如果您担心性能问题，我建议使用您已经拥有的类型。 您进行的任何转换/解析都将在每次渲染时完成。 但是，在我的应用程序中，这将是相当低的性能问题。

- edoloughlin