React 虚拟dom与diff算法

react

一、React的虚拟dom

　　react生成真实dom的步骤如下：

　　　　1、state（数据）与模版结合生成虚拟dom。

　　　　2、React根据虚拟dom的结构生成真实dom节点（1）。

　　　　3、数据发生改变时，生成新的虚拟dom。

　　　　4、新的虚拟dom与原先的虚拟dom进行比较，将新的虚拟dom变动的部分替换原虚拟dom。（2）

　　　　5、根据变动后的虚拟dom结构生成真实的dom。

　　　　注解：（1）React根据虚拟dom生成真实dom，而不是直接生成真实dom。根据这个特性，可以实现跨端应用(React Native),根据虚拟dom的结构转换为原生android、ios的控件。（原生中没有dom，直接生成dom节点，不能实现跨端应用）。

　　　　　　（2）React diff算法的实现。
二、React中的diff算法

　　react的diff算法步骤如下：

　　　　1、（tree diff）将react中的树形结构每一层结构进行比较，如果其中一个节点被删除，不用比较这个节点下的节点，直接重新生成真实dom (1)。

　　　　2、（component diff）将react的树形结构中单个节点组件进行比较，如果这个组件发生改变，直接替换这个组件。

　　　　3、（element diff）将树形结构的节点组件内部的Element元素进行比较，如果元素发生改变，替换这个元素。

　　　　注解：(1)树形结构下可能n层的节点发生改变，但他下面的n+1、n+2... 层组件可能相同，这样可能会消耗性能，但算法的逻辑简单，执行快速。

三、React中的diff算法比较索引

　　　　1、React是根据每一层结构上的key值进行索引比较，所以在循环时要加key值 (1)。

　　　　注解:(1)循环时可能顺手就加了index作为索引，使用index做索引带来的一个后果是，当循环的数组减少一条时（不是最后一条），key值会重新赋值，原先建立的key值索引失效，不利于diff算法，所以尽量不使用index作为项目的索引。