React 源码剖析系列 － 不可思议的 react diff
深入浅出React（四）：虚拟DOM Diff算法解析
React diff 算法
总结链接引用的文章
React出于性能的考虑，为了避免频繁操作DOM，采用了虚拟DOM结构（virtual DOM）：
每当虚拟DOM树发生变化树发生变化时，React会将当前DOM树和之前的虚拟DOM树进行diff算法对比，得到虚拟DOM结构的区别，然后仅仅渲染差异部分。
ReactiveNative官方称，不同类型的 component 是很少存在相似 DOM tree 的机会，因此这种极端因素很难在实现开发过程中造成重大影响的。
- 类型仙相同的节点总是生成同样的树，而类型不同的节点也总是生成不同的树。
- 可以为多次render都表现稳定的节点设置key。
基于上述两点，制定以下diff策略：
diff 策略
- 1.Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。
- 2.拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
- 3.对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。
算法优化
基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。
React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；
- React 通过分层求异的策略，对 tree diff 进行算法优化；
- React 通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对 component diff 进行算法优化；
- React 通过设置唯一 key的策略，对 element diff 进行算法优化；
开发建议
建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；
建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。