「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」
什么是协调 ？
接上一篇 Virtual DOM描述，UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。
一句话概括，将 Virtual DOM与“真实的” DOM 同步，这个过程称为协调。
在看一下官网对于“协调”的设计动机
如何高效的将Virtual DOM与“真实的” DOM 同步？
Diff算法
Virtual DOM与“真实的” DOM 同步过程需要对比新旧Virtual DOM最小变更，React提出了一套在两个假设下的启发是算法，该算法时间复杂度O(n);
对比策略：
- 同级比较
- 组件类型不同直接替换，相同情况根据key值确定
- key决定显示的顺序，key相同可以复用，key不存在的组件删除或者创建
比如下列组件：组件A包含BCD,B组件包含EF,D组件包含GH
变化后：组件A包含BCD,B组件包含GE
变化前结构图
graph TB
A --> B & C & D
B --> E & F
D --> G & H
变化后结构图
graph TB
A --> B & C & D
B --> G & E
Diff过程
深度优先遍历从根节点A组件开始变更
同级别，同类型，存在相同的key可复用，其他需要更新
- 变化前后同级别A组件，同级别，同类型，同key直接复用，A组件完成
- 变化前后A组件子组件B,同级别，同类型，同key直接复用，B组件完成
- 变化前后组件B子组件G,同级别，不同类型，此处创建G组件
- 变化前后组件B子组件E,同级别，同类型，不同的key，可以服用，但是位置发生变化，至此B节点完成
- 变化前后A组件子组件C,同级别，同类型，同key直接复用，C组件完成
- 变化前后A组件子组件D,同级别，同类型，同key直接复用，D组件完成
- 变化前后组件D子组件G,直接删除
- 变化前后组件D子组件H,直接删除,至此D节点完成
- 整个节点完成diff
结语
以上仅限个人学习理解，如有不足敬请谅解。如能指出不足，不胜感激。
