ReactDOM.render()
- First render , entrance
render
params
- element: after babel After compiling React.createElement object
- container: dom object ,div#root
- callback: When the rendering is finished, the callback function will be ( No need to pay attention , It doesn't work )
legacyRenderSubtreeIntoContainer
params
- parentComponent: null
- children: React.createElement
- container: div#root
- forceHydrate: false; Client rendering and Server rendering Distinguishing identification
- callback
function
- establish FiberRoot and RootFiber
updateContainer
params
- element: React.createElement
- container: FiberRoot
- parentComponent
- callback
function
- adopt rootFiber obtain lane
- establish update object , Put it in updateQueue in
scheduleUpdateOnFiber
params
- fiber
- lane
- eventTime
function
- obtain fiber Of root: markUpdateLaneFromFiberToRoot
performSyncWorkOnRoot
params
- root: FiberRoot
function
- perform renderRoot and commitRoot
- root.finishedWork = root.current.alternate(workInProgress)
- root.finishedLanes = lanes;
renderRoot
params
- root
- lanes
function
- establish workInProgress: prepareFreshStack
- root.finishedWork 、 finishedLanes Restore defaults
- workInProgressRoot = root;
- To the whole workInProgress assignment
- perform workLoop
workLoop
function
- perform while loop : Judge the condition —— workInProgress !== null;( Only rootFiber.return yes null)
performUnitOfWork
params
- unitOfWork: workInProgress
function
- perform beginWork
- perform completeUnitOfWork
commitRoot
params
- root
copyright notice
author[snowofcat],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823040638333A.html