我正在读一本名为《React Cookbook》的高级react 书.出于某种原因,作者使用带有前缀的key,如下所示:

<div>
    {state.items.map((s, i) => (
        <div key={`square-${i}`}>
            {s}
        </div>
    ))}
</div>

我经常看到key是这样构建的,它总是让我感到惊讶,特别是来自一位资深作家的.据我所知,这和只有key={i}没有区别.

当我开始使用Reaction时,有一些不太高级的Reaction开发人员告诉我,当您嵌套列表时,这很有用,如下所示:

<div>
    {state.items.map((s, i) => (
        <div key={`square-${i}`}>
            {s.map(f, j) => (
                <div key={`foo-${j}`}>
                    {f}
                </div>
            )}
        </div>
    ))}
</div>

但是,这也是无用的,因为密钥唯一性是有作用域的,对吗?因此,不同级别或不同列表中的密钥不需要是唯一的.

如果我的 list 由两种或两种以上的事情组成,那么这样做可能有some种意义,比如:

<div key={`${item.type}-${i}`}>

但除此之外,为什么有人会使用基于索引的键,而不是只使用索引?

推荐答案

我相信人们开始添加前缀是因为他们错误地假设了独特性是如何在整个树上发挥作用的:

键的作用域为同级级别.您可以在组件树中向上/向下使用相同的键,但不能横向使用.请注意,尽管这与DOM树本身没有直接关系,但会对组件树做出react .

数组类型的Reaction子项有一个"父项",因此键可以在"sibling 项"之间重复(从技术上讲,不是sibling 项,因为它们有这个"数组父项",这在DOM树中是透明的).

以下代码有效,不会触发任何警告.The related react-dom code can be found here.

    <parent key="unique">
      <sibling key="must" />
      <sibling key="be" />
      <sibling key="unique">
        <child key="unique" />
      </sibling>
    </parent>
  <div>
    {['a', 'b', 'c', 'd', 'e'].map((letter, idx) => (
      <span key={idx}>{letter}</span>
    ))}
    {['a', 'b', 'c', 'd', 'e'].map((letter, idx) => (
      <span key={idx}>{letter}</span>
    ))}
  </div>

如果数据是"静态的"并且永远不会改变,那么使用索引作为键方法是非常好和安全的,否则可能会出现呈现问题和/或性能影响.

Javascript相关问答推荐

切换时排序对象数组,切换不起作用

我们如何从一个行动中分派行动

保持物品顺序的可变大小物品分配到平衡组的算法

如果Arrow函数返回函数,而不是为useEffect返回NULL,则会出现错误

如何将数组用作复合函数参数?

在数组中查找重叠对象并仅返回那些重叠对象

为什么云存储中的文件不能公开使用?

传递方法VS泛型对象VS事件特定对象

OnClick更改Json数组JSX中的图像源

react 路由如何使用从加载器返回的数据

需要RTK-在ReactJS中查询多个组件的Mutations 数据

在对象的嵌套数组中添加两个属性

Reaction路由v6.4+数据API:重试加载程序而不显示错误

已在EventListener中更新/更改异步的React.js状态对象,但不会导致组件重新呈现

JQuery-无法 Select 使用elementor添加的元素的值

typewriter 效应和容器大小

在promise.all之前选中NULL

导航栏中显示项目的方式有问题

react setState不保留以前的状态

更改垫子树界面线条边框底部问题的方向设计Angular