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

React.js中组件键的重要性

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

React.js中组件键的重要性

扩展@Deadfish答案。假设您有10个待办事项,每个项目都有状态(例如,是否处于编辑模式)。

在下一个渲染过程中,只剩下9个待办事项。例如,因为您删除了一项。

现在,react需要知道原始的10个项目中还有哪些仍然保留,因此它可以保留每个项目的状态,并仅重新渲染状态更改的项目。

那就是反应使用的目的

key
。如果使用索引作为键,则原始键为0..9。新的键是0..8。

这可能会导致几个问题:

  1. React总是会得出结论,您删除了列表中的最后一项,但这不一定是正确的。因此,还有其他关于此的帖子,例如,这一篇
  2. React总是会断定项目没有更改顺序,因此React会认为原始项目5的任何状态仍将是项目5的状态。编号。3,则所有项目应在列表中上移。这是另一个答案指出的。
  3. 如果列表中的项目没有任何状态(只有道具)(例如待办事项的标题),则渲染效率将非常低下。如果删除第一个项目,则react会得出结论,即所有项目现在都有一个新文本,并将重新渲染所有剩余项目(而不是有效地从DOM中仅删除第一个项目)。

使用唯一和不变的键-不仅在单个渲染运行中 唯一 ,而且在 多个渲染循环中 尤其 稳定 -可以确保一切按预期工作,并确保有效地更新DOM。




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

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

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