react渲染机制（虚拟DOM，diff算法）

前言

react的特点之一，就是通过虚拟DOM技术与diff算法的结合，网页性能的极大提高。

在页面开始的时候，React会调用render函数构建一颗Dom树，在组件的props/state改变时，React会再次调用render函数构建一颗虚拟DOM树，与原来的DOM树用diff算法来进行比较，得到DOM结构变化的部分，然后将变化部分操作到真实DOM中。整个过程都是在内存中进行，因此减少了对DOM的频繁操作，从而提升性能，变得高效。

传统的diff 算法

diff算法并非react首创，传统的diff 算法通过循环递归对节点进行依次比较，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数。对此有兴趣的同学可参考：传统diff 算法

React的diff算法

如果React只是引入传统的diff算法，而没有进行任何改动，优化，那么即使在现在的cpu性能模式下，这种性能效率对前端渲染来说也远达不到要求。

但是值得称道的是，React基于两个假设，大大提高了diff算法的性能：

1. 两个相同的组件会产生两个类似的DOM结构，两个不同的组件会产生两个不同的DOM结构。
2. 对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。

基于这两个假设， 将算法的复杂度由O(n^3)变成了O(n)。极大的提高了效率。