10. When should I use "key" / 什么时候该用 key

最后更新于:2022-04-01 05:02:18

**只有当出现一串一样的元素的时候** ,这个时候 Virtual DOM 去 reconciliate(搞) DOM 的时候会傻傻分不清楚。 > 别的时候不要用 key,key 已经出现在 virtual dom diff/reconciliation 的阶段,效率要更低于 shouldComponentUpdate,所以尽量通过 shouldComponentUpdate 来决定是否要 render component。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-21_564fde4600de3.gif) 官网文档的这个例子 ~~~ renderA: <div><span>first</span></div> renderB: <div><span>second</span><span>first</span></div> => [replaceAttribute textContent 'second'], [insertNode <span>first</span>] ~~~ 其实是往第一个位置插入了一个 span,但是会被 diff 成 * 替换内容 first 到 second * 插入内容为 first 的 span 不光是这样会更慢的问题,如果你在 first 上绑有事件的话,重新 render 后因为是 replace 了内容,因此这是原来的事件会变成 second 的事件,这样就 **完全错乱** 了。
';