Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
10 min ReactDOM Codebase Overview
ryota-murakami
February 01, 2018
3
1.5k
10 min ReactDOM Codebase Overview
React.js meetup #5 2018/02/01(木) の発表資料です。
ryota-murakami
February 01, 2018
Tweet
Share
Featured
See All Featured
Bash Introduction
62gerente
598
210k
The Pragmatic Product Professional
lauravandoore
19
3.1k
Making Projects Easy
brettharned
98
4.4k
Thoughts on Productivity
jonyablonski
44
2.4k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
Rails Girls Zürich Keynote
gr2m
87
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Side Projects
sachag
450
37k
Fireside Chat
paigeccino
13
1.4k
What the flash - Photography Introduction
edds
62
10k
Transcript
10 min ReactDOM Codebase Overview Ryota Murakami (@malloc007) React.js meetup
#5 2018/02/01
ɾUnemployed but currently accepting React Native Job ɾFavorite JavaScript Programming,
Open Source ɾDon’t have a CS degree !
ɾEspecially fascinating React core team programming practice
None
Motivation
*XBOUUPQBSUJDJQBUFJOUIF3FBDU0441SPKFDU CVUJEPO`UVOEFSTUBOE3FBDU*NQMDPEFBUBMM
4PVSDF$PEF3FBEJOH!
Introduction
React = Monorepo Codebase
Contain some packages, so
Today Topics ɾReact Top-Level API ɾReactDOM ɾEspecially client-side first rendering
React Top-Level API
React Top-Level API
packages/react/package.json
packages/react/index.js
packages/react/src/React.js ~~
We can import & using
Next…
ReactDOM
ReactDOM
packages/react-dom/index.js
packages/react-dom/src/client/ReactDOM.js
huge codebase
Fundamental Knowledge
https://www.codecademy.com/articles/react-virtual-dom
onece Node.appendChild() call Calculate finally content on Virtual DOM
onece Node.appendChild() call Calculate finally content on Virtual DOM
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html functional component Component React Elements
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html functional component Component React Elements React has Elements as
a internal presentation
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html functional component Component React Elements In order to Virtual
DOM calculation
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html functional component Component React Elements Reconciler calculate state change
etc…
Really simplified ReactDOM overview
ɾpackages/react-dom ɾpackages/react-reconciler Related Packages
ɾpackages/react-dom ɾpackages/react-reconciler named React Fiber Related Packages
None
UpdateQueue Scheduler CommitWork Reconciler ReactDOM
UpdateQueue Scheduler CommitWork Reconciler ReactDOM Rendering Actual DOM
packages/react-dom/src/client/ReactDOM.js ReactDOM.render() definition
Trace callstack initial rendering
ReactDOM.render() ReactDOM.legacyRenderSubtreeIntoContainer()
ReactDOM.legacyRenderSubtreeIntoContainer()
root?
ReactRoot
ReactDOM.legacyRenderSubtreeIntoContainer() ReactRoot.render()
ReactRoot.render()
DOMRenderer?
DOMRenderer = ReactFiberReconciler
DOMRenderer.updateContainer() = ReactFiberReconciler.updateContainer()
ReactFiberReconciler.updateContainer() ReactFiberReconciler.updateContainerAtExpirationTime()
ReactFiberReconciler.updateContainerAtExpirationTime() ReactFiberReconciler.insertUpdateIntoFiber()
ReactFiberReconciler.insertUpdateIntoFiber() createUpdateQueue()
Scheduler CommitWork Reconciler ReactDOM UpdateQueue
ReactFiberReconciler.updateContainerAtExpirationTime() ReactFiberScheduler.scheduleWork()
CommitWork Reconciler UpdateQueue ReactDOM Scheduler
ReactFiberScheduler.scheduleWork() ReactFiberScheduler.scheduleWorkImpl() ReactFiberScheduler.requestWork() ReactFiberScheduler.performWorkOnRoot() ReactFiberScheduler.completeRoot() ReactFiberScheduler.commitRoot() ReactFiberScheduler.performWork() ReactFiberScheduler.commitAllHostEffects()
ReactFiberScheduler.commitAllHostEffects() ReactFiberCommitWork.commitPlacement()
Reconciler UpdateQueue Scheduler ReactDOM CommitWork
ReactFiberCommitWork.commitPlacement() appendChild()
appendChild Implementation packages/react-dom/src/client/ReactDOM.js
We got Actual DOM
but React goes on! thanks