Skip to content

Commit

Permalink
feat: 更新内容
Browse files Browse the repository at this point in the history
  • Loading branch information
梁怀刚 committed Jul 8, 2024
1 parent 093551b commit 8d8cfce
Showing 1 changed file with 4 additions and 7 deletions.
11 changes: 4 additions & 7 deletions docs/知识点/React diff算法.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,12 @@ diff算法是指生成补丁的方式,主要用于虚拟DOM变化,更新真

react触发更新的时机主要在state变化和hooks调用之后,此时触发虚拟dom树变更遍历,采用深度优先算法,但传统的遍历方式效率较低,为了优化效率采用了分治的方式,将单一节点的比对转化为
三种类型节点的比对,分别是:树、组件与元素以此来提升效率。

树比对:由于网页视图中较少有跨层级的节点移动,两组数据虚拟dom树只对同级节点进行比较;

组件比对:如果组件是同一类型则进行树比对,如果不是则放入补丁中;

元素比对:主要发生在同层级中,通过标记节点操作生成补丁,节点操作对应真实的DOM剪裁操作;
- 树比对:由于网页视图中较少有跨层级的节点移动,两组数据虚拟dom树只对同级节点进行比较;
- 组件比对:如果组件是同一类型则进行树比对,如果不是则放入补丁中;
- 元素比对:主要发生在同层级中,通过标记节点操作生成补丁,节点操作对应真实的DOM剪裁操作;

以上是经典的react diff算法内容。
自react16起,引入了fiber架构,为了使整个过程随时暂停与恢复,节点与树分别采用fiberNode于fiberTree进行重构,fiberNode采用了双链表的结构,可以直接找到兄弟节点与子节点。整个更新过程有current于workInProgress两株树双缓冲完成,workInProgress更新完成后再通过修改current相关指针去指向新的节点。
自react16起,引入了fiber架构,为了使整个过程随时暂停与恢复,节点与树分别采用fiberNode于fiberTree进行重构,fiberNode采用了双链表的结构,可以直接找到兄弟节点与子节点。整个更新过程有current与workInProgress两株树双缓冲完成,workInProgress更新完成后再通过修改current相关指针去指向新的节点。

React拥有完整的diff算法策略,且拥有随时中断更新的时间切片能力,在大批量节点更新的情况下拥有更友好的交互体验。

Expand Down

0 comments on commit 8d8cfce

Please sign in to comment.