React render process

ReactDOM.render()

1. First render , entrance

render

params

1. element: after babel After compiling React.createElement object
2. container: dom object ,div#root
3. callback: When the rendering is finished, the callback function will be （ No need to pay attention , It doesn't work ）

legacyRenderSubtreeIntoContainer

params

1. parentComponent: null
2. children: React.createElement
3. container: div#root
4. forceHydrate: false; Client rendering and Server rendering Distinguishing identification
5. callback

function

1. establish FiberRoot and RootFiber

updateContainer

params

1. element: React.createElement
2. container: FiberRoot
3. parentComponent
4. callback

function

1. adopt rootFiber obtain lane
2. establish update object , Put it in updateQueue in

scheduleUpdateOnFiber

params

1. fiber
2. lane
3. eventTime

function

1. obtain fiber Of root: markUpdateLaneFromFiberToRoot

performSyncWorkOnRoot

params

1. root: FiberRoot

function

1. perform renderRoot and commitRoot
2. root.finishedWork = root.current.alternate(workInProgress)
3. root.finishedLanes = lanes;

renderRoot

params

1. root
2. lanes

function

1. establish workInProgress: prepareFreshStack

• root.finishedWork 、 finishedLanes Restore defaults
• workInProgressRoot = root;
• To the whole workInProgress assignment

2. perform workLoop

workLoop

function

1. perform while loop : Judge the condition —— workInProgress !== null;（ Only rootFiber.return yes null）

performUnitOfWork

params

1. unitOfWork: workInProgress

function

1. perform beginWork
2. perform completeUnitOfWork

commitRoot

params

1. root