栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

有没有办法让React自动为孩子定义“键”?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

有没有办法让React自动为孩子定义“键”?

不,那里没有。

如未观察到的那样,当没有指定键时,React的默认行为是使用天真的方法就地更新组件。从功能上讲,这等效于根据元素相对于其兄弟元素的索引指定默认键。在您的示例中,这看起来像:

// Render Pass 1<Card>  <p key={0}>Paragraph 1</p>  <p key={1}>Paragraph 2</p></Card>// Render Pass 2<Card>  <p key={0}>Paragraph 2</p></Card>

这就是为什么您看到第一个元素的文本已转换的原因,但是正如您注意到的那样,这并不总是最佳结果。那么为什么React无法使用更智能的自动密钥呢?答案是,为此,实际上只有两个选择,都不是理想的选择:

  1. 他们可以对您的应用程序结构做出某些假设。在您的简短示例中,很显然,应该根据段落的文本内容来匹配段落。但这并不一定在所有情况下都是正确的,并且很难将这种逻辑扩展到具有自定义元素,大量道具,嵌套子项等的更复杂的场景。

  2. 他们可以使用一种花哨的通用差异算法,但就性能而言,这可能是相当昂贵的,React非常重视。正如React的对帐文档中所说:

有许多算法试图找到最小的操作集来转换元素列表。Levenshtein距离可以使用O(n
2)中的单个元素插入,删除和替换来找到最小值。即使我们要使用Levenshtein,也找不到节点何时移到另一个位置,而这样做的算法的复杂性要差得多。

因此,无论哪种方式,“自动键分配”的任何好处也都带有一系列缺点。最后,这并不是真正值得的,特别是考虑到在大多数情况下,手动分配密钥并不那么困难或麻烦。在同一文档页面的更下方:

在实践中,找到密钥并不难。大多数情况下,您要显示的元素已经具有唯一的ID。如果不是这种情况,则可以向模型添加新的ID属性,也可以对内容的某些部分进行哈希处理以生成密钥。请记住,密钥仅在其兄弟之间必须是唯一的,而不是全局唯一的。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/386105.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号