子阵列唯一键

所以我理解unique key：如果我有这样的：子阵列唯一键

array.push(<ChildComponent key=some_key />

但是，如果我有这样的事情：

cols.push(<td key={i}>Some value</td>)>

（当我创建一个具有分页的表格组件时...）。我不确定这个关键...那张表支持排序（对于列），所以......我相信当我们分类时，如果我们使用这个“我”键，某些东西就会被打破。在这种情况下，一个关键是必要的吗？或者它仅在包含子组件的数组中是必需的。无论如何，如果我们不使用密钥，我们会从React收到我们想要避免/修复的警告。

来源

2014-10-01 Ferran Negre

所以，如果我正确理解你，“我”是排序数组的一些索引？如果是这样的话，那将会失败，因为组件应该被键入他们的数据所独有的东西（以及它们的渲染），而不是像索引那样变化的东西。

由于密钥并不总是与同一条数据绑定，所以这只会导致div的内容被重新渲染，而不是简单地重新排列它们的顺序。尝试将密钥设置为基于其数据的哈希值！

来源

2014-10-01 22:17:52

其实，“i”是指数一个for循环，填写表格。我只是遇到麻烦，找到一个这样简单的事情的关键。会是对象（或只是表格行td内部的值）是一个好钥匙吗？在这种情况下，我仍然发现一个奇怪的警告。 – 2014-10-01 22:47:15

@FerranNegre它必须能够转换为一个字符串，所以一个对象将无法工作。你知道的任何东西都是唯一的，可以转换为字符串，可以正常工作。 – FakeRainBrigand 2014-10-01 22:49:55

基于索引键是足够除非：

项被插入或移除的任何位置，除了端
中的项目的项目的顺序可以改变
项可以与其他项目来替换

如果其中任何一个是真的，您应该使用一个键来标识项目本身，而不是它们在数组中的位置。否则，索引足以识别它。

当子树较大或涉及img/video /其他昂贵的组件时，正确使用密钥会提高性能。如果要为正在添加/删除/重新排序的项目添加动画效果，这也是一项要求。

来源

2014-10-01 22:48:06 FakeRainBrigand

非常好的解释。所以让我举个例子：我有一个包含5个水果（苹果，橙子，梨，香蕉和樱桃）的数组，我想把它们放到一个html表格中。我希望能够对此表进行排序。对于数组中的每个元素（td元素），什么是合适的键？字符串的散列？如果我的桌子可能有重复的元素（如两个香蕉），会发生什么？ – 2014-10-01 22:56:53

如果它可能有重复的元素，那么名称将不起作用。如果它可以被排序并且有可能重复的元素，那么你就有歧义，并且必须获得更多的数据或者如果你不能使用索引。即使将物品包装在一个简单的物体中，例如'{value：fruit，id：String（Math.random（））}'给你区分项目的能力，id是一个有效的密钥。 – FakeRainBrigand 2014-10-02 05:39:40

如果你正在寻找一个很好的解决方案，以生成唯一钥匙，我摘下这一个从一些反应，和/通量例子，它是我的球队伟大的工作和我

uuid: function() { 
    var i, random; 
    var uuid = ''; 
    for (i = 0; i < 32; i++) { 
     random = Math.random() * 16 | 0; 
     if (i === 8 || i === 12 || i === 16 || i === 20) { 
      uuid += '-'; 
     } 

     uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16); 
    } 
    return uuid; 
}

来源

2014-10-06 22:01:45 captray

键约状态。按州来说，我的意思不仅仅是this.state，还包括你直接在this中存储的任何东西，并且需要或想要在渲染之间保留。如果你的孩子没有国家，钥匙并不重要。您可以为每个孩子每次生成一个随机密钥，并且可以工作。但是，如果有些孩子拥有国家，那么这种方法会创建一个新孩子，初始化为初始状态。因此，如果您需要在呈现之间保留子状态，则子键无法更改。这将确保子组件保留而不是重新创建。

见儿童和解这里：http://facebook.github.io/react/docs/multiple-components.html

来源

2014-10-11 11:56:05 Eduardo

子阵列唯一键

回答

相关问题