13 KiB
title, description, published, authors, tags, attached, license
| title | description | published | authors | tags | attached | license | ||
|---|---|---|---|---|---|---|---|---|
| React Internals: Understanding the Reconciler | 2023-05-05T13:45:00.284Z |
|
|
cc-by-nc-sa-4 |
React 18.2.0 source code: 9e3b772b8c
Only focusing on React DOM code
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
-
createRoot:9e3b772b8c/packages/react-dom/src/client/ReactDOMRoot.js (L166)createContainer:9e3b772b8c/packages/react-dom/src/client/ReactDOMRoot.js (L224-L233)new ReactDOMRoot:9e3b772b8c/packages/react-dom/src/client/ReactDOMRoot.js (L242)
-
render:9e3b772b8c/packages/react-dom/src/client/ReactDOMRoot.js (L92)updateContainer:9e3b772b8c/packages/react-dom/src/client/ReactDOMRoot.js (L134)
-
updateContainer:9e3b772b8c/packages/react-reconciler/src/ReactFiberReconciler.new.js (L321)createUpdate:9e3b772b8c/packages/react-reconciler/src/ReactFiberReconciler.new.js (L362-L365)- Assigns
elementto be rendered in update context
- Assigns
enqueUpdate:9e3b772b8c/packages/react-reconciler/src/ReactFiberReconciler.new.js (L381)enqueueConcurrentClassUpdate:9e3b772b8c/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js (L264)9e3b772b8c/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js (L120-L124)(why.old?)
scheduleUpdateOnFiber:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L533)ensureRootIsScheduled:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L640)newCallbackNode:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L817-L820)scheduleCallback:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L47)Schedule.:9e3b772b8c/packages/react-reconciler/src/Scheduler.js (L16)schedulerpackage:9e3b772b8c/packages/scheduler
-
unstable_scheduleCallback:9e3b772b8c/packages/scheduler/src/forks/Scheduler.js (L308)requestHostTimeout:9e3b772b8c/packages/scheduler/src/forks/Scheduler.js (L370)callback(which ishandleTimeout):9e3b772b8c/packages/scheduler/src/forks/Scheduler.js (L592)handleTimeout:9e3b772b8c/packages/scheduler/src/forks/Scheduler.js (L130)flushWork:9e3b772b8c/packages/scheduler/src/forks/Scheduler.js (L137)workLoop:9e3b772b8c/packages/scheduler/src/forks/Scheduler.js (L176)while (currentTask !== null):9e3b772b8c/packages/scheduler/src/forks/Scheduler.js (L193-L196)currentTaskisperformConcurrentWorkOnRootfromreact-reconciler
-
performConcurrentWorkOnRoot:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L829)renderRootSync:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L881-L883)renderRootSyncdef:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1663)prepareFreshStack:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1688)- Assigning
workInProgressto:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1476-L1478) - Assigning
workInProgress.alternatetocurrent(remember for later):9e3b772b8c/packages/react-reconciler/src/ReactFiber.new.js (L275)
- Assigning
workLoopSyncusage:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1703)workLoopSyncdef:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1741-L1746)
-
Inside
workLoopSync:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1744)- Take
.alternateofunitOfWork(on first render,FiberRoot):9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1840) beginWork:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1849)- Depending on type of
unitOfWork:9e3b772b8c/packages/react-reconciler/src/ReactFiberBeginWork.new.js (L3780-L3952)React.StrictModeisMode:9e3b772b8c/packages/react-reconciler/src/ReactFiberBeginWork.new.js (L3856)- DOM element is
HostComponent:9e3b772b8c/packages/react-reconciler/src/ReactFiberBeginWork.new.js (L3831)
- EG:
HostComponentcallsupdateHostComponent:9e3b772b8c/packages/react-reconciler/src/ReactFiberBeginWork.new.js (L1426) - Bonus:
markRefis howrefis assigned to a node:9e3b772b8c/packages/react-reconciler/src/ReactFiberBeginWork.new.js (L1456) reconsileChildren:9e3b772b8c/packages/react-reconciler/src/ReactFiberBeginWork.new.js (L1457)reconcileChildFibers:9e3b772b8c/packages/react-reconciler/src/ReactFiberBeginWork.new.js (L312)- Re-run
beginWorkon all children via:9e3b772b8c/packages/react-reconciler/src/ReactChildFiber.new.js (L1245-L1347) - Once done, call
completeUnitOfWork:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1856)
- Take
-
completeUnitOfWork:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1864)completeWork:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1883)- Depending on type of root, render:
9e3b772b8c/packages/react-reconciler/src/ReactFiberCompleteWork.new.js (L860) - DOM element is
HostComponent:9e3b772b8c/packages/react-reconciler/src/ReactFiberCompleteWork.new.js (L961) createInstance:9e3b772b8c/packages/react-reconciler/src/ReactFiberCompleteWork.new.js (L1010-L1016)appendAllChildren:9e3b772b8c/packages/react-reconciler/src/ReactFiberCompleteWork.new.js (L1018)
-
finishConcurrentRender:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L954)- Inside:
9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1024) commitRoot:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1149-L1153)commitRootImpl:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L1976-L1981)commitMutationEffects:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L2163)
- Inside:
-
commitMutationEffects:9e3b772b8c/packages/react-reconciler/src/ReactFiberCommitWork.new.js (L2036)commitMutationEffectsOnFiber:9e3b772b8c/packages/react-reconciler/src/ReactFiberCommitWork.new.js (LL2045)HostRoot:9e3b772b8c/packages/react-reconciler/src/ReactFiberCommitWork.new.js (L2254)commitReconcilationEffects:9e3b772b8c/packages/react-reconciler/src/ReactFiberCommitWork.new.js (L2256)commitPlacement:9e3b772b8c/packages/react-reconciler/src/ReactFiberCommitWork.new.js (L2444)insertOrAppendPlacementNode:9e3b772b8c/packages/react-reconciler/src/ReactFiberCommitWork.new.js (L1520)insertBeforeorappendChild:9e3b772b8c/packages/react-reconciler/src/ReactFiberCommitWork.new.js (L1578-L1583)- Inside
react-dom:9e3b772b8c/packages/react-dom/src/client/ReactDOMHostConfig.js (L513-L519)
-
Back to
commitRootImpl:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L2163)- Bonus:
commitLayoutEffects:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L2189) requestPaint:9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L2206)- Bonus: Run double effects on dev:
9e3b772b8c/packages/react-reconciler/src/ReactFiberWorkLoop.new.js (L2261-L2265)
- Bonus: