current position:Home>React render process

React render process

2021-08-23 04:06:40 snowofcat

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
  1. 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

copyright notice
author[snowofcat],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823040638333A.html

Random recommended