ReactJS中键的意义是什么? [英] What is the significance of keys in ReactJS?
问题描述
我想了解如果我在动态添加的组件中不使用键会发生什么.我删除了键，它的渲染没有任何问题，只是给出了有关键使用的警告消息.有人可以举个例子，说明如果不使用密钥会带来什么后果?
I want to understand what happens if I don't use keys in dynamically added components. I removed keys and it renders without any issue and just gave warning messages regarding key usage. Would someone please give some example of what the consequences are if we don't use keys?
推荐答案
键帮助React识别哪些项已更改，添加或删除.应该为数组内的元素赋予键，以赋予元素稳定的身份:
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
示例:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
TL; DR在渲染动态子级时使用唯一键和常量键，或者期望发生奇怪的事情.
TL;DR Use unique and constant keys when rendering dynamic children, or expect strange things to happen.
在我使用React.js的几周中，我发现棘手的方面之一是了解当组件是一系列子组件的一部分时，您期望将其传递给组件的关键属性.并非必须指定此属性，除了在控制台上收到此警告之外，大多数情况下其他所有事情都将起作用:
One of the tricky aspects I've found during the few weeks I've been using React.js is to understand the key property you're expected to pass to a component when it's part of an array of children. It's not that you have to specify this property, things will work most of the time apart from getting this warning on the console:
数组中的每个孩子都应该有一个唯一的键"道具.检查未定义的渲染方法.通过阅读链接的文档，很容易看不到这种肯定的含义:
Each child in an array should have a unique "key" prop. Check the render method of undefined. By reading the linked documentation it can be easy to not see the implications of this affirmation:
当React调和带键的子代时，它将确保所有带键的子代被重新排序(而不是破坏)或销毁(而不是重新使用).起初，我认为这全是关于表现的，但正如Paul O’Shannessy所指出的，这实际上是关于身份的.
When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused). At first it looked to me it was all about performance but, as Paul O’Shannessy pointed, it's actually about identity.
此处的关键是要了解DOM中的所有内容都不能在React虚拟DOM"中表示出来，而且因为DOM的直接操作(例如用户更改值或监听某个元素的jQuery插件)没有被React注意到，不使用唯一键和常数键将导致React在键不是常数时重新创建组件的DOM节点(并丢失该节点中的任何未跟踪状态)，或者在键不是唯一键时重用DOM节点来渲染另一个组件(并将其状态绑定到其他组件).
The key here is to understand not everything in the DOM has a representation in React "Virtual DOM" and, because direct manipulations of the DOM (like a user changing an value or a jQuery plugin listening an element) are unnoticed by React, not using unique and constant keys will end up with React recreating the DOM node of a component when the key is not constant (and losing any untracked state in the node) or reusing a DOM node to render another component when the key is not unique (and tying its state to this other component).
这里有一个现场演示，显示结果多么糟糕:
Here you have a live demo showing how awful the results are:
http://jsfiddle.net/frosas/S4Dju/
只需添加一个项目，对其进行更改，添加更多项目，然后查看会发生什么情况.
Just add an item, change it, add more items and see what happens.
也请参阅
这篇关于ReactJS中键的意义是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
