React高级进阶教程-React中的“栈调和”过程是怎样的?

99 阅读1分钟

引言

学习知识需要建立必要且完整的上下文

如果我们不清楚 React 15 的运作机制

就无从把握它的局限性

如果我们不能确切地把握 React 15 的局限性

就无法从根本上理解 React 16 大改版背后的设计动机

调和过程与 Diff 算法

Virtual DOM 是一种编程概念。在这个概念里,UI以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的”DOM同步。这一过程叫作协调(调和)。

调和是“使一致”的过程

Diff 是“找不同”的过程

如今大众的认知里

当我们讨论调和的时候,其实就是在讨论 Diff

Diff 确实是调和过程中最具代表性的一环

Diff 策略的设计思想

要想找出两个树结构之间的不同

传统的计算方法是通过循环递归进行树节点的一一对比

O(n3n^3)

  • 若两个组件属于同一个类型,它们将拥有相同的 DOM
  • 处于同一层级的一组子节点,可通过设置 key 作为唯一标识,从而维持各个节点在不同渲染过程中的稳定性

image.png

image.png

image.png

image.png