ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

react diff算法

2020-03-14 22:59:03  阅读:362  来源: 互联网

标签:lastIndex react 算法 nextIndex 组件 diff mountIndex 节点


一、diff策略

1.Web UI中DOM节点跨层级的移动特别少,可以忽略不计

2.拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构

3.对于同一层级的一组(具有相同父元素的)子节点,它们可以通过唯一id进行区分(即key)

 

二、tree diff(两棵组件树之间的比较。比较两棵树的结构)

基于策略1,React对树的算法进行了简洁明了的优化,即:对树进行分层比较,两棵树只会对 同一层次 的节点进行比较。

注意】 这里比对的,是同一父节点下的所有子节点。如下图,React只会对相同颜色方框内的DOM节点进行比较

 

   

 

三、component diff(组件的差异比较过程)

数据层面的差异比较

1.如果都是同一类型的组件(即:两节点是同一个组件类的两个不同实例,比如:<div id="before"></div>与<div id="after"></div>),按照原策略继续比较Virtual DOM树即可

2.如果出现不是同一类型的组件,则将该组件判断为dirty component,从而替换整个组件下的所有子节点

(即:假如treeA(旧组件树)的某个节点A,在树状结构中,对应treeB(新组件树)的节点B。如果节点B和与节点A不是同一类型的组件,则节点A及其所有子节点,将全部被删除,并且重新创建节点B及其子节点)

ps:对于同一类型的组件,有可能其Virtual DOM没有任何变化(即,子节点的顺序、状态state等,都未发生变化),如果能够确切知道这点,那么就可以节省大量的diff运算时间。因此,React允许用户通过shouldComponentUpdate()来判断该组件是否需要进行diff算法分析

比较的是:

(1)同组节点集合内容,是否改变。即,假如某节点A在旧结构中拥有两个子节点B、C,如果新结构中A同样拥有B、C两个子节点,无论B、C位置是否交换,都认为component层面未发生改变。

(2)相同组件数据是否改变。如某组件A的state等数据发生改变,component diff会发现差异,并进行组件的更新。

 

四、element diff(同一层级同一父元素下的节点集合,进行比较,真实DOM渲染前,比较节点结构的变化)

真实DOM渲染,结构差异的比较

1.INSERT_MARKUP:新的组件类型不在旧集合里,即全新的节点。需要对新节点执行插入操作

2.MOVE_EXISTING:旧集合中有新组件类型,且element是可更新的类型。generateComponentChildren已调用receiveComponent,这种情况下prevChild=nextChild,就需要做移动操作,可以复用以前的DOM节点

3.REMOVE_NODE:旧组件类型,在新集合里也有,但对应的element不同则不能直接复用和更新,需要执行删除操作,或者旧组件不在新集合里的,也需要执行删除操作

 

个人理解:

component diff 后,准备好了所有的组件(即节点),都是新结构需要的组件,并且每个组件都包含了新的state等数据。

element diff ,是根据新的DOM结构,寻找由旧结构、更新至新结构最高效的方式。

五、(element diff)节点移动过程

概览图示:

 

  对节点进行diff差异化对比

 

diff的差异化对比过程——【注意事项】:

过程目的:为了找到由旧的树结构得到新的树结构,最高效的方式

前提条件:已知新旧两棵Virtual DOM树的树结构

diff的差异化对比过程——【总体流程】:

依次取出新集合中的每个节点,通过key值,确定当前节点是否存在于旧集合中,如果存在,再进行其他的比较、判断,确定旧集合中的此节点是否需要移动。

diff的差异化对比过程——【重要变量】:

1.lastIndex:一个标记值,只用作对比大小,来决定是否进行节点移动。初始值为0

2.nextIndex:新集合下一个要取的节点的坐标。用于确定新集合当前已取到第几个节点,从而继续遍历。初始值为0

3._mountIndex:旧集合中当前节点的坐标

具体步骤:

【初始化】lastIndex=0,nextIndex=0

1.取新集合第一个节点,B

  第一步

(1)key=b,旧集合中存在。对应_mountIndex=1,此时lastIndex=0,nextIndex=0

(2)if(child._mountIndex < lastIndex) ? ——No,节点不移动

(3)lastIndex=Math.max(prevChild._mountIndex,lastIndex)。lastIndex=1

(4)prevChild._mountIndex=nextIndex。新集合中,B._mountIndex=0

(5)nextIndex ++ 。nextIndex=1,进入下一个节点的判断

2.取新集合第二个节点,A

 

  第二步

(1)key=a,旧集合中存在。对应_mountIndex=0,此时lastIndex=1,nextIndex=1

(2)if(child._mountIndex < lastIndex) ? ——Yes,节点移动!

(3)lastIndex=Math.max(prevChild._mountIndex,lastIndex)。lastIndex=1

(4)prevChild._mountIndex=nextIndex。新集合中,A._mountIndex=1

(5)nextIndex ++ 。nextIndex=2,进入下一个节点的判断

3.取新集合第三个节点,D

 

  第三步

(1)key=d,旧集合中存在。对应_mountIndex=3,此时lastIndex=1,nextIndex=2

(2)if(child._mountIndex < lastIndex) ? ——No,节点不移动

(3)lastIndex=Math.max(prevChild._mountIndex,lastIndex)。lastIndex=3

(4)prevChild._mountIndex=nextIndex。新集合中,D._mountIndex=2

(5)nextIndex ++ 。nextIndex=3,进入下一个节点的判断

4.取新集合第三个节点,C

 

  第四步

(1)key=c,旧集合中存在。对应_mountIndex=2,此时lastIndex=3,nextIndex=3

(2)if(child._mountIndex < lastIndex) ? ——Yes,节点移动!

(3)lastIndex=Math.max(prevChild._mountIndex,lastIndex)。lastIndex=3

(4)prevChild._mountIndex=nextIndex。新集合中,C._mountIndex=3

(5)nextIndex ++ 。nextIndex=4。发现新集合已经遍历完毕,diff操作到此完成

 

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



作者:南慕瑶
链接:https://www.jianshu.com/p/650246766f67
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:lastIndex,react,算法,nextIndex,组件,diff,mountIndex,节点
来源: https://www.cnblogs.com/fs0196/p/12494925.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有