基于React的Virtual-dom的学习

最近因为工作需要，开始学习react，一直在写，不是很清楚神奇的Virtual dom究竟是怎么实现的，闲暇之余，此文作为总结，图片借用了其他博客的，下面都附有链接，如有不妥，请留言联系我！

--问题描述：

    你是否听过React的Virtual dom？是否看到很多介绍性的文章还是不明觉厉？其实学习代码最好的方式是手动试试，看看她到底如何工作，直接从代码中找寻答案

https://github.com/ilvseyinfu/VirtualDom/blob/master/README.md  可看这个，后面不用看了

--正文:

1.什么是dom diff 算法？

   找到两棵任意的树之间的修改，这是一个复杂度为O(n^3) 的问题 标准的的Diff算法，显然这是无法满足性能要求

2.React的神奇之处：

   在react中，构建UI界面的思路是用当前状态决定，不同的状态对应不同的界面，所以这势必要对diff算法进行优化，然后Facebook的工程师做到了

   将diff 算法的时间复杂度降低到 O(n) react机制图如下图：

  

当该节点state发生更改，连带着它所有的子节点都会发生更改，computer diff就会和真实的dom做一个比较，看看哪个节点发生更改，然后做一个重新的渲染，之所以做diff，就是为了在re-render时提高效率github代码演示

    

3.三个前提策略(基于这三个策略对算法进行优化 )：

   1）WEB UI中dom节点跨层级的移动操作特别少，可以忽略不计

    

   基于策略1，即对树进行分层比较，两颗树只会对同一层次的节点进行比较，也就是说，只会对相同颜色方块内的dom节点进行比较，当发现该节点

   不存在，该节点连同子节点完全被删除，不会用作比较，这样只用对树进行一次遍历，便能完成整个dom树的比较。        

   

    2）拥有相同类的两个组件会产生相似的树型结构，拥有不同类的两个组件会产生不同树型结构

    

    基于策略2，在react中比较两个虚拟DOM节点，当两个节点不同时，分为两种情况：

    1.节点类型不同

    当同一位置输出了不同类型的节点，react直接删除旧的节点，创建并插入新的节点 

    RenderA:<Header/> 

  RenderB:<Content/>

  RemoveNode <Header>, insertNode <Content/>  

    2.节点类型相同，但属性不同 

    RenderA:<div style={{color: 'red'}} />

    RenderB:<div style={{color: ‘green'}} />

    RemoveStyle color，addStyle font-weight 'bold'

   3）对于同一层级的一组子节点，他们可以通过唯一id进行区分

   

      如上图，发现B!=A，RemoveNode(A),CreatNode(B),inserNode(B)以此类推...创建ADC，删除BCD，针对这一现象提出优化：允许开发者对同

      一层级的同组子节点，添加唯一的key进行区分，如下图：

      

      通过diff差异化对比时，通过key发现新老集合中的节点都是相同的节点，因此无需进行节点的删除和创建，只要将位置进行移动即可，react给出的

      diff结果为：B D不做任何操作，移动A C即可    

4.diff操作流程：

    1）diff递归找出不同，存入差异数组，包含自身位置，父组件位置，差异类型diff

    2）根据差异类型和差异信息，对旧的虚拟dom进行操作

    const UPDATE_TYPES={

      MOVE:1, //移动节点

      REMOVE:2, //删除节点

      INSERT:3, //插入节点

      TEXT:4    //文本更新

  }    

    3）所有处理结束后，一次性操作真实dom完成处理patch

5.参考资料：

    https://zhuanlan.zhihu.com/purerender/20346379

    http://www.infoq.com/cn/articles/react-dom-diff

6.结束：    

    React 消耗性能的模型很简单, 很好理解: 每次调用 setState 会重新计算整个子树，如果你想要提高性能，尽量少调用setState