当前位置: 首页 > 面试题库 >

ReactJS中键的意义是什么?

皮景龙
2023-03-14
问题内容

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


问题答案:

按键可帮助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/

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

资源



 类似资料:
  • 在React中键的意义是什么?我读到在循环中使用索引不是键的最佳解决方案。为什么啊?

  • 问题内容: 的意义是什么 我正在尝试那样使用它 问题答案: 它被称为传播属性,其目的是使道具的传递更加容易。 让我们假设您有一个接受N个属性的组件。如果数量增加,将这些信息传递下去可能是乏味且笨拙的。 因此,您可以这样做,将它们包装在一个对象中并使用扩展符号 它将把它解压缩到组件上的props中,即,仅当将props传递给另一个组件时,才“永远” 在函数内部使用。照常使用打开包装的道具。

  • 在这段代码中是什么意思?

  • 问题内容: 好的,这可能有点钝了,但是Node.js的目的/需求是什么 我主要通过CloudFoundry注意到了它,但是不太确定它应该做什么。但是我猜想它可能相当大,因为为什么VMWare会支持它。 提前致谢。 问题答案: 这是一个… 高效且100%事件驱动的IO框架, 足够灵活,可以使用它可以找到的最佳基础操作系统功能, 以高级编程语言(客户端最有可能使用的相同语言)展示API, 在该语言的最

  • 我今天遇到了,我不确定我是否理解它的用途。。。在Spring文档中,它说 允许同一类处理多个请求类型的控制器实现。这个类的子类可以用表单的方法处理几种不同类型的请求 在另一个网站上,他们说 它将多个请求处理方法聚合到单个控制器中,因此相关功能可以很容易地保持在一起。 我仍然不明白扩展与下面的相比是更好还是不同?或者,更像是旧版本Spring的遗留产品?我觉得我有一些基本的误解。。。

  • 问题内容: 只是想知道在这里,让变量在程序中存储无限值有什么意义?是否有实际用途,并且在任何情况下都更可取,还是只是为了插入而插入了一个小片段? 问题答案: 它用作比较的无上限上限值。这对于查找某物的最低值很有用。例如,计算遍历树木时的路径路线成本。 例如,在选项列表中找到“最便宜”的路径: 如果您没有空余时间,您将使用什么价值?就足够-消除了这个猜测。