110. react16 的diff算法相较于15有什么改动？

[goldEli]

相比 React 15，React 团队几乎重写了 reconciliation 模块（a.k.a virtual DOM），引入了 fiber 数据结构，也就是把每个节点独立成一个渲染单元，每个单元在渲染时询问浏览器是否空闲，为优先级高的（比如动画，事件）渲染让出渲染线程，实现 Concurrent（优先级渲染机制）。

[zlx362211854]

react15的虚拟dom，是由虚拟节点（vnode）构成的一棵树。

diff算法策略：

• 策略一（tree diff）： Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。

• 策略二（component diff）： 拥有相同类的两个组件 生成相似的树形结构， 拥有不同类的两个组件 生成不同的树形结构。

• 策略三（element diff）： 对于同一层级的一组子节点，通过唯一id区分。

tree diff

（1）React通过updateDepth对Virtual DOM树进行层级控制。 （2）对树分层比较，两棵树 只对同一层次节点 进行比较。如果该节点不存在时，则该节点及其子节点会被完全删除，不会再进一步比较。 （3）只需遍历一次，就能完成整棵DOM树的比较。

react16的升级

引入了 fiber 数据结构，也就是把每个节点独立成一个渲染单元，每个单元在渲染时询问浏览器是否空闲，为优先级高的（比如动画，事件）渲染让出渲染线程，实现 Concurrent（优先级渲染机制）。