我正在读一本名为《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}`}>
但除此之外,为什么有人会使用基于索引的键,而不是只使用索引?