小编典典

ReactJS中键的意义是什么?

reactjs

我想了解如果我在动态添加的组件中不使用键会发生什么。我删除了键,它的渲染没有任何问题,只是给出了有关键使用的警告消息。有人可以举个例子,说明如果不使用密钥会带来什么后果?


阅读 301

收藏
2020-07-22

共1个答案

小编典典

按键可帮助React识别哪些项目已更改,添加或删除。应该为数组内的元素提供键,以赋予元素稳定的标识:

例:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

TL; DR在渲染动态子级时使用唯一键和常量键,或者期望发生奇怪的事情。

在我使用React.js的几周中,我发现了一个棘手的方面之一,就是了解当组件成为子数组的一部分时,您期望将其传递给组件的关键属性。并不是您必须指定此属性,除了在控制台上收到此警告之外,大多数情况下其他事情都会起作用:

数组中的每个子代都应具有唯一的“键”道具。检查未定义的渲染方法。通过阅读链接的文档,很容易看不到这种肯定的含义:

当React调和带键的子代时,它将确保所有带键的子代都将重新排序(而不是破坏)或销毁(而不是重新使用)。起初,我认为这全是关于表现的,但是,正如保罗·奥汉尼斯(Paul
O’Shannessy)所指出的那样,这实际上与身份有关。

这里的关键是要了解不是DOM中的所有内容在React“虚拟DOM”中都具有表示形式,并且因为对DOM的直接操作(例如用户更改值或侦听元素的jQuery插件)没有被React注意到,所以不使用唯一键和常量键将以React在键不是恒定的情况下重新创建组件的DOM节点(并丢失该节点中的任何未跟踪状态)或在键不是唯一的情况下重用DOM节点来渲染另一个组件而结束(并绑定)到其他组件的状态)。

在这里,您将获得一个现场演示,演示结果如何:

http://jsfiddle.net/frosas/S4Dju/

只需添加一个项目,更改它,添加更多项目,然后看看会发生什么。

资源

2020-07-22