1.React中Key的作用以及diff算法 ​

Diff算法的限制 ​

为了降低算法复杂度，React的diff会预设三个限制：

1. 只对同级元素进行Diff。如果一个DOM节点在前后两次更新中跨越了层级，那么React不会尝试复用他。

2. 两个不同类型的元素会产生出不同的树。如果元素由div变为p，React会销毁div及其子孙节点，并新建p及其子孙节点。

3. 开发者可以通过 key prop来暗示哪些子元素在不同的渲染下能保持稳定。考虑如下例子：

单节点的diff ​

1. 判断key是否相同

2. 相同：判断type是否相同，如果都相同可以直接复用DOM节点，否则删除

3. 不相同：删除

多节点diff ​

Diff算法的整体逻辑会经历两轮遍历：

• 第一轮遍历：处理更新的节点。

• 第二轮遍历：处理剩下的不属于更新的节点

第一轮遍历 ​

1. 遍历 newChildren，看key是否相同，不同就不能复用直接跳出循环。否则如果type不同就标记删除