漫游 React 源码 - 03 - Diff 算法简述和优先级

React 的 Diff 算法基于2个假设：

不同类型的元素会产生不同的树。
- 首先检查根元素。如果根元素具有不同类型，React 将卸载旧树并从头开始构建新树。
- 如果根元素是相同类型，React 将仅更新已更改的属性。
开发人员可以使用 key 属性提示哪些子元素可能在不同的渲染中保持稳定。使用键，React 可以更高效地重新排序、重复使用和重新渲染 dom 节点。
- 对于子元素列表，React 使用 key 属性来匹配旧树和新树中的子元素。

Lane 优先级

React 使用 Lane 模型来管理任务的优先级。每个任务都有一个优先级，React 根据任务的优先级来决定任务的执行顺序。通过查看源码，来一瞥优先级的类型。


export function getLabelForLane(lane: Lane): string | void {
    if (enableSchedulingProfiler) {
        if (lane & SyncHydrationLane) {
            return 'SyncHydrationLane';
        }
        if (lane & SyncLane) {
            return 'Sync';
        }
        if (lane & InputContinuousHydrationLane) {
            return 'InputContinuousHydration';
        }
        if (lane & InputContinuousLane) {
            return 'InputContinuous';
        }
        if (lane & DefaultHydrationLane) {
            return 'DefaultHydration';
        }
        if (lane & DefaultLane) {
            return 'Default';
        }
        if (lane & TransitionHydrationLane) {
            return 'TransitionHydration';
        }
        if (lane & TransitionLanes) {
            return 'Transition';
        }
        if (lane & RetryLanes) {
            return 'Retry';
        }
        if (lane & SelectiveHydrationLane) {
            return 'SelectiveHydration';
        }
        if (lane & IdleHydrationLane) {
            return 'IdleHydration';
        }
        if (lane & IdleLane) {
            return 'Idle';
        }
        if (lane & OffscreenLane) {
            return 'Offscreen';
        }
        if (lane & DeferredLane) {
            return 'Deferred';
        }
    }
}

SyncLane: 用于高优先级的同步任务，比如用户交互。
InputContinuousLane: 用于用户连续输入。
DefaultLane: 用于默认优先级的任务。
TransitionLanes: 用于过渡任务（低优先级任务，如 UI 过渡效果）。
RetryLanes: 用于重试任务，比如 Suspense 中的任务重试。
IdleHydrationLane: 用于空闲时的水合任务。
IdleLane: 用于空闲时执行的低优先级任务。
OffscreenLane: 用于处理 Offscreen 任务。
DeferredLane: 用于延迟处理的任务。