虚拟DOM

1.虚拟DOM的介绍：
虚拟DOM就是一个真实DOM转换的JS对象。
2.虚拟DOM的机制：
在浏览器端用JavaScript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素。（每一次数据发生变化时，更新虚拟dom只要渲染发生改变的部分，其他的不需要关注，这样大大缩减了渲染时间，降低了渲染成本）
3.虚拟DOM性能更快的原因：
真实的DOM中有各种DOM事件，属性，而虚拟DOM中没有那么多无用的东西，所以当浏览器去进行遍历的时候，遍历虚拟DOM的速度是比真实DOM快非常非常多的，而且虚拟DOM还有diff算法，又将算法的复杂度降低了一个维度。

diff算法

1.React的diff算法是在哪里进行计算的？
diff算法是在render（主要用来提升节点的性能，它是基于JavaScript计算。使用Render函数将template里面的节点解析成虚拟的dom）里面进行计算的。
2.diff算法的作用：
计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。
3.React的diff算法与传统的diff算法的区别：
传统的diff算法：通过循环递归对节点进行依次对比，其复杂度要达到O(n^3)，其中n是节点总数，效率十分低下，假设我们要展示1000个节点，那么我们就要依次执行上十亿次的比较。即便是CPU快能执行30亿条命令，也很难在一秒内计算出差异。
react的diff算法：
React用三大策略将O(n^3)复杂度转化为 O(n)复杂度：
策略一（tree diff）：
Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。

策略二（component diff）：
拥有相同类的两个组件生成相似的树形结构，
拥有不同类的两个组件生成不同的树形结构。

策略三（element diff）：
对于同一层级的一组子节点，通过唯一id区分。

总结

1.React通过制定大胆的diff策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；React是如何将O(n3) 复杂度的问题转换成 O(n) 的？
1）只进行同级比较
2）不同类的React组件会被当做完全不同的DOM结构而被完全替换
3）key prop：开发人员可以通过给Virtual DOM一个唯一的key属性暗示React这是同一个DOM结构，反之若key值不同则会被当做完全不同的DOM结构。
2.React通过分层求异的策略，对tree diff进行算法优化；
3.React通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对component diff进行算法优化。
4.React通过设置唯一key的策略，对element diff进行算法优化；
5.建议，在开发组件时，保持稳定的DOM结构会有助于性能的提升；
6.建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响React的渲染性能
diff算法详情可以查看https://www.jianshu.com/p/3ba0822018cf