初窥React-10 (render引)
浏览performSyncWorkOnRoot 方法,根据不同情况进行渲染,这里是workInProgress和没有开始的
if (root === workInProgressRoot && includesSomeLane(root.expiredLanes, workInProgressRootRenderLanes)) { // There's a partial tree, and at least one of its lanes has expired. Finish // rendering it before rendering the rest of the expired work. lanes = workInProgressRootRenderLanes; exitStatus = renderRootSync(root, lanes); if (includesSomeLane(workInProgressRootIncludedLanes, workInProgressRootUpdatedLanes)) { // The render included lanes that were updated during the render phase. // For example, when unhiding a hidden tree, we include all the lanes // that were previously skipped when the tree was hidden. That set of // lanes is a superset of the lanes we started rendering with. // // Note that this only happens when part of the tree is rendered // concurrently. If the whole tree is rendered synchronously, then there // are no interleaved events. lanes = getNextLanes(root, lanes); exitStatus = renderRootSync(root, lanes); } } else { lanes = getNextLanes(root, NoLanes); exitStatus = renderRootSync(root, lanes); }
刨除掉非主要代码以外,来到了commit代码,这个后面慢慢分析
var finishedWork = root.current.alternate; root.finishedWork = finishedWork; root.finishedLanes = lanes; commitRoot(root); // Before exiting, make sure there's a callback scheduled for the next // pending level. ensureRootIsScheduled(root, now()); return null;
Just Do It