Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
10 min ReactDOM Codebase Overview
Search
ryota-murakami
February 01, 2018
3
1.9k
10 min ReactDOM Codebase Overview
React.js meetup #5 2018/02/01(木) の発表資料です。
ryota-murakami
February 01, 2018
Tweet
Share
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Invisible Side of Design
smashingmag
301
51k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Fireside Chat
paigeccino
37
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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