Open zlx362211854 opened 4 years ago
策略一(tree diff): Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。
策略二(component diff): 拥有相同类的两个组件 生成相似的树形结构, 拥有不同类的两个组件 生成不同的树形结构。
策略三(element diff): 对于同一层级的一组子节点,通过唯一id区分。
(1)React通过updateDepth对Virtual DOM树进行层级控制。 (2)对树分层比较,两棵树 只对同一层次节点 进行比较。如果该节点不存在时,则该节点及其子节点会被完全删除,不会再进一步比较。 (3)只需遍历一次,就能完成整棵DOM树的比较。
引入了 fiber 数据结构,也就是把每个节点独立成一个渲染单元,每个单元在渲染时询问浏览器是否空闲,为优先级高的(比如动画,事件)渲染让出渲染线程,实现 Concurrent(优先级渲染机制)。
相比 React 15,React 团队几乎重写了 reconciliation 模块(a.k.a virtual DOM),引入了 fiber 数据结构,也就是把每个节点独立成一个渲染单元,每个单元在渲染时询问浏览器是否空闲,为优先级高的(比如动画,事件)渲染让出渲染线程,实现 Concurrent(优先级渲染机制)。