current 树与 workInProgress 树双缓冲模式在 Fiber 架框的实现

双缓冲

其实是一种在游戏领域由来已久广泛应用的经典设计模式

假如去看一场总时长只有 1 小野的话剧中场不休息,需要不间断地演出
对于话剧来说,半小时处需要一次转场
在不中断演出的情况下想要实现转场

解决方法是:准备两个舞台来做这场戏

左侧舞台和右侧舞台分别是两套缓冲数据,而呈现在观众眼前的连贯画面就是不同的缓冲数据交替被读取后的结果

React 中 ,双缓冲模式的主要利好则是能够较大限度地实现 Fiber 节点的利用,从而减少性能方面的开销

current 树与 workInProgress 树可以对村“双缓冲”模式下的两套缓冲数据

  • 当 current 树呈现在用户眼前,所有更新都会由 workInProgress 树来承接
  • workInProgress 树将在用户看不到的内存里完成所有改变