React 虚拟dom与diff算法

Lophole 2020-02-18

一、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作为项目的索引。

相关推荐