**只有当出现一串一样的元素的时候** ,这个时候 Virtual DOM 去 reconciliate(搞) DOM 的时候会傻傻分不清楚。
> 别的时候不要用 key,key 已经出现在 virtual dom diff/reconciliation 的阶段,效率要更低于 shouldComponentUpdate,所以尽量通过 shouldComponentUpdate 来决定是否要 render component。
![](https://box.kancloud.cn/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 的事件,这样就 **完全错乱** 了。
- 1. Why not 2 way binding/为毛不用双向绑定
- 2. What's Virtual DOM, why should we care / 为毛要用 Vitual Dom
- 3. Why Immutable / 为毛要不可变
- 4. How to do Unit test React project / 如何单元测试
- 5. Modular and Components
- 6. How should I thinking in react way / 如何以 React 的方式解决问题
- 7. What about Data Fetching / 只有 V 的话,数据 M 呢
- 8. What about Router / router 怎么办
- 9. How to communicate between two components that don't have a parent-child relationship/ 不是父子关系的 component 怎么交互
- 10. When should I use "key" / 什么时候该用 key
- 11. What's these Warnings / 这些黄黄的是神马
- 12. How to Profile Component Perfomance / 如何提升效率