Question

我最近开始使用Reactjs，我发现它非常有趣。密钥是关于身份的，因此通过唯一密钥识别每个组件是可行的方法，对吧？假设我有这个例子：

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？

谢谢！

Answer 1

这并不重要，唯一重要的是密钥在父元素中的兄弟姐妹中是唯一的。它并非必须在您的整个应用中都是唯一的，只需在您将这些项目附加到的父级内部。

通常对元素进行简单迭代，例如<li>或<option>，只需在迭代器中使用索引即可。

EG：

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>
    );
}

唯一一次不能正常工作的是，如果您稍后在不同的订单等中添加/删除键控元素，以便您的密钥可能与另一个兄弟冲突。在这种情况下，您可能希望以其他方式生成密钥以确保其唯一性 - 或者使用模型中已知的唯一密钥。无论你采用哪种方式，只要它在兄弟姐妹中独一无二，它就会没问题。

Answer 2

正如@Mike所说，如果您要添加/删除列表，它们仅用于保留真实DOM元素的排序。它们只需要对本地组件是唯一的，因此可以从数据中重用自然ID。因为这个原因，我不会使用迭代器中的索引。

重新。数字，对比字符串：如果您关注性能，我会使用您已经拥有的任何类型。您执行的任何转换/解析都将在每次渲染时完成。但是，我的应用程序中的性能问题列表中的这个数字相当低。

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

2 个答案: