我只是想知道在阅读文章时https://coderwall.com/p/jdybeq/the-importance-of-component-keys-in-react-js https://coderwall.com/p/jdybeq/the-importance-of-component-keys-in-react-js.
它有一个简单的小提琴代码，上面写着 - 如果你没有唯一的常量键，你可能会陷入困境
- 当 key 不恒定时重新创建组件的 DOM 节点
- 当键不唯一时，重用 DOM 节点来渲染另一个组件
在下面的情况下非常令人困惑 -
- 为什么我给出 key = index （尽管它是唯一且恒定的，为什么 React 的行为很奇怪？）
- 当键唯一但不恒定时到底会发生什么（如果不只是删除它，它是否检查 DOM 中是否存在键。）
扩展@Deadfish 的答案。假设您有 10 个待办事项，并且每个项目都有状态（例如是否处于编辑模式）。
在下一个渲染过程中，只剩下 9 个待办事项。例如。因为您删除了其中一项。
现在 React 需要知道原来的 10 个项目中还剩下哪些，因此它可以保留每个项目的状态，并仅重新渲染状态发生变化的项目。
这就是反应使用的key为了。如果使用索引作为键，那么原始键是0..9。新的密钥是 0..8。
这可能会导致几个问题：
- React 总是会断定您删除了列表中的最后一项，这不一定是正确的。 SO 上还有其他关于此的帖子，例如this one https://stackoverflow.com/questions/30406811/removing-an-item-causes-react-to-remove-the-last-dom-node-instead-of-the-one-ass
- React 将始终得出结论，这些项目没有更改顺序，因此 React 会认为原始项目 5 的任何状态仍将是项目 5 的状态。但是如果您删除了例如。编号。 3、然后所有项目都应该在列表中向上移动。这就是另一个答案所指出的。
- 如果列表中的项目没有任何状态（只有 props） - 例如你的待办事项的标题 - 那么你的渲染将变得非常低效。如果删除第一个项目，那么 React 将得出结论：所有项目现在都有新文本，并将重新渲染所有剩余项目（而不是有效地仅从 DOM 中删除第一个项目）。
使用唯一且恒定的键 - 所以不仅仅是unique在一次渲染运行中，但特别是constant over 多个渲染周期- 将确保一切按预期进行，并确保 React 有效更新 DOM。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
