在今天的场景中,比起 “优先级” ,有个更适合的词或者理念,叫做 “车道模型”。在 React 内部使用了 Lane
这个单词,相信这篇文章可以让大家不仅停留在这个单词的直译上,而是真的理解 “车道模型”。
整体流程
我们先从整体上看一下,从 “数据变更” 到 “渲染” 的链路是怎样的:
当我们更改数据时,其实是创建了一个更新 **Update**
。这个 **Update**
上会有一个属性 **lane**
,用来标记该更新所属的 “车道” 。
接着这个 **Update**
会被添加到对应 Fiber
节点的更新队列中。
同时这个 **Update**
的 **lane**
会被标记到从 Fiber
到 FiberRootNode
的全部节点上。这样做的目的是:可以方便的从 FiberRootNode
上知道,当前一共有哪些 “车道” 的更新需要做。
最后,会将所需要的执行渲染任务,加入到调度器中等待执行。
在渲染过程中,也仅会处理 Fiber
节点上,属于本次更新 “车道” 的更新 **Update**
。
更新上的 “车道” 标记
先来看一下这个更新 **Update**