zoukankan      html  css  js  c++  java
  • React 虚拟dom与diff算法

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

  • 相关阅读:
    sp_trace_setfilter sqlserver筛选跟踪或跟踪过滤
    sp_trace_setevent sqlserver跟踪事件及列
    通过导入虚拟电脑的方式还原centos
    sqlserver profiler 抓出来作业的代码 SQLAgent
    克隆server2008R2造成SID冲突
    sqlserver ssms ctrl+e快捷键问题
    Caffe源码解析1:Blob
    梯度下降、随机梯度下降和批量梯度下降
    Caffe CNN特征可视化
    Caffe 抽取CNN网络特征 Python
  • 原文地址:https://www.cnblogs.com/uimeigui/p/12324799.html
Copyright © 2011-2022 走看看