Javascript 使用非子组件的ReactJS中的子数组唯一键

所以我明白了：如果我有这样的东西：

array.push(<ChildComponent key=some_key />

但如果我有这样的东西：

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

---

在创建具有分页功能的表组件时。。。。我不确定那把钥匙。。。该表支持对列进行排序，因此。。。我相信当我们分类时，如果我们使用该I键，某些东西将被破坏。在这种情况下，是否需要钥匙？或者，它仅在包含子组件的数组中才是必需的。在任何情况下，如果我们不使用一个键，我们会从React得到一个我们想要避免/修复的警告。

所以如果我理解正确，我是排序数组的某个索引？如果是这样的话，这将导致崩溃，因为组件应该被设置为其数据和呈现的唯一对象，而不是像索引这样的变量

---

因为密钥没有一致地绑定到同一段数据，这只会导致div重新提交它们的内容，而不是简单地重新排列它们的顺序。尝试根据他们的数据将密钥设置为哈希

如果我理解正确，我是排序数组的某个索引？如果是这样的话，这将导致崩溃，因为组件应该被设置为其数据和呈现的唯一对象，而不是像索引这样的变量

---

因为密钥没有一致地绑定到同一段数据，这只会导致div重新提交它们的内容，而不是简单地重新排列它们的顺序。尝试根据他们的数据将密钥设置为哈希

基于索引的键就足够了，除非：

项目将插入或从除末端以外的任何位置删除 项目中项目的顺序可以更改 项目可以替换为其他项目 如果其中任何一个为真，则应该使用一个键来标识项本身，而不是它们在数组中的位置。否则，索引将充分标识它

---

当子树较大或涉及img/视频/其他昂贵组件时，正确使用键可以提高性能。如果您希望正确地为添加/删除/重新排序的项目设置动画，这也是一项要求。

基于索引的关键点就足够了，除非：

项目将插入或从除末端以外的任何位置删除 项目中项目的顺序可以更改 项目可以替换为其他项目 如果其中任何一个为真，则应该使用一个键来标识项本身，而不是它们在数组中的位置。否则，索引将充分标识它

---

当子树较大或涉及img/视频/其他昂贵组件时，正确使用键可以提高性能。如果您希望正确地为添加/删除/重新排序的项目设置动画，这也是一项要求。

如果您正在寻找生成唯一关键点的好解决方案，我从一些React/Flux示例中选取了这一个，这对我的团队和我都非常有用

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

---

如果您正在寻找一个生成唯一键的好解决方案，我从一些React/Flux示例中选取了这个解决方案，它对我的团队和我都非常有用

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

钥匙是关于国家的。我所说的状态不仅指this.state，还指直接存储在该文件中的任何内容，以及在渲染之间需要或想要保留的内容。如果您的孩子没有状态，则密钥不重要。您可以每次为每个子级生成一个随机密钥，这样就行了。但如果某些子级具有状态，则该方法将创建一个新的子级，并初始化为其初始状态。因此，如果需要在渲染之间保留子状态，则子密钥不能更改。这将确保保留子组件，而不是重新创建

请参见此处的子对账：

键与状态有关。我所说的状态不仅指this.state，还指直接存储在该文件中的任何内容，以及在渲染之间需要或想要保留的内容。如果您的孩子没有状态，则密钥不重要。您可以每次为每个子级生成一个随机密钥，这样就行了。但如果某些子级具有状态，则该方法将创建一个新的子级，并初始化为其初始状态。因此，如果需要在渲染之间保留子状态，则子密钥不能更改。这将确保保留子组件，而不是重新创建

---

请参见此处的子协调：

实际上，i是填充表的for循环的索引。我只是找不到像那样简单的东西的钥匙。对象或者仅仅是表行td中的值本身是一个好键吗？在这种情况下，我仍然发现这个警告很奇怪。@FerranNegre它必须能够转换成字符串，这样对象就不能工作了。您知道的任何项都是唯一的，并且可以转换为字符串，都可以正常工作。实际上，i是填充表的for循环的索引。我只是找不到像那样简单的东西的钥匙。对象或者仅仅是表行td中的值本身是一个好键吗？在这种情况下，我仍然觉得这个警告很奇怪。@FerranNegre它必须能够

---

转换为字符串，使对象无法工作。你知道的任何东西都是这个项目所独有的，可以转换成字符串，这很好。非常好的解释。让我举一个例子：我有一个数组，里面有5种水果：苹果、橘子、梨、香蕉和樱桃，我想把它们放到一个html表中。我想把这张桌子整理一下。对于数组td元素中的每个元素，什么是合适的键？字符串的散列？如果我的表可以有重复的元素，比如两个香蕉，会发生什么？如果它可以有重复的元素，那么名称就不起作用了。如果可以对其进行排序，并且有可能重复元素，那么就存在歧义，必须获取更多数据，否则就必须使用索引。即使将项目包装在一个简单的对象中，例如{value:fruit，id:StringMath.random}也可以让您区分项目，并且id是一个有效的键。非常好的解释。让我举一个例子：我有一个数组，里面有5种水果：苹果、橘子、梨、香蕉和樱桃，我想把它们放到一个html表中。我想把这张桌子整理一下。对于数组td元素中的每个元素，什么是合适的键？字符串的散列？如果我的表可以有重复的元素，比如两个香蕉，会发生什么？如果它可以有重复的元素，那么名称就不起作用了。如果可以对其进行排序，并且有可能重复元素，那么就存在歧义，必须获取更多数据，否则就必须使用索引。即使将项包装在一个简单的对象中，例如{value:fruit，id:StringMath.random}也可以让您区分项，并且id是一个有效的键。