Slide 1
Slide 1 text
10 min ReactDOM Codebase Overview
Ryota Murakami (@malloc007)
React.js meetup #5
2018/02/01
Slide 2
Slide 2 text
ɾUnemployed but currently accepting React Native Job
ɾFavorite JavaScript Programming, Open Source
ɾDon’t have a CS degree !
Slide 3
Slide 3 text
ɾEspecially fascinating React core team programming practice
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Motivation
Slide 6
Slide 6 text
*XBOUUPQBSUJDJQBUFJOUIF3FBDU0441SPKFDU
CVUJEPO`UVOEFSTUBOE3FBDU*NQMDPEFBUBMM
Slide 7
Slide 7 text
4PVSDF$PEF3FBEJOH!
Slide 8
Slide 8 text
Introduction
Slide 9
Slide 9 text
React = Monorepo Codebase
Slide 10
Slide 10 text
Contain some packages, so
Slide 11
Slide 11 text
Today Topics
ɾReact Top-Level API
ɾReactDOM
ɾEspecially client-side first rendering
Slide 12
Slide 12 text
React Top-Level API
Slide 13
Slide 13 text
React Top-Level API
Slide 14
Slide 14 text
packages/react/package.json
Slide 15
Slide 15 text
packages/react/index.js
Slide 16
Slide 16 text
packages/react/src/React.js
~~
Slide 17
Slide 17 text
We can import & using
Slide 18
Slide 18 text
Next…
Slide 19
Slide 19 text
ReactDOM
Slide 20
Slide 20 text
ReactDOM
Slide 21
Slide 21 text
packages/react-dom/index.js
Slide 22
Slide 22 text
packages/react-dom/src/client/ReactDOM.js
Slide 23
Slide 23 text
huge codebase
Slide 24
Slide 24 text
Fundamental Knowledge
Slide 25
Slide 25 text
https://www.codecademy.com/articles/react-virtual-dom
Slide 26
Slide 26 text
onece Node.appendChild() call
Calculate finally content on Virtual DOM
Slide 27
Slide 27 text
onece Node.appendChild() call
Calculate finally content on Virtual DOM
Slide 28
Slide 28 text
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
functional component
Component
React Elements
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
functional component
Component
React Elements
In order to Virtual DOM calculation
Slide 31
Slide 31 text
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
functional component
Component
React Elements
Reconciler
calculate
state change etc…
Slide 32
Slide 32 text
Really simplified ReactDOM overview
Slide 33
Slide 33 text
ɾpackages/react-dom
ɾpackages/react-reconciler
Related Packages
Slide 34
Slide 34 text
ɾpackages/react-dom
ɾpackages/react-reconciler
named React Fiber
Related Packages
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
UpdateQueue
Scheduler
CommitWork
Reconciler
ReactDOM
Slide 37
Slide 37 text
UpdateQueue
Scheduler
CommitWork
Reconciler
ReactDOM
Rendering Actual DOM
Slide 38
Slide 38 text
packages/react-dom/src/client/ReactDOM.js
ReactDOM.render() definition
Slide 39
Slide 39 text
Trace callstack initial rendering
Slide 40
Slide 40 text
ReactDOM.render()
ReactDOM.legacyRenderSubtreeIntoContainer()
Slide 41
Slide 41 text
ReactDOM.legacyRenderSubtreeIntoContainer()
Slide 42
Slide 42 text
root?
Slide 43
Slide 43 text
ReactRoot
Slide 44
Slide 44 text
ReactDOM.legacyRenderSubtreeIntoContainer()
ReactRoot.render()
Slide 45
Slide 45 text
ReactRoot.render()
Slide 46
Slide 46 text
DOMRenderer?
Slide 47
Slide 47 text
DOMRenderer = ReactFiberReconciler
Slide 48
Slide 48 text
DOMRenderer.updateContainer() = ReactFiberReconciler.updateContainer()
Slide 49
Slide 49 text
ReactFiberReconciler.updateContainer()
ReactFiberReconciler.updateContainerAtExpirationTime()
Slide 50
Slide 50 text
ReactFiberReconciler.updateContainerAtExpirationTime()
ReactFiberReconciler.insertUpdateIntoFiber()
Slide 51
Slide 51 text
ReactFiberReconciler.insertUpdateIntoFiber()
createUpdateQueue()
Slide 52
Slide 52 text
Scheduler
CommitWork
Reconciler
ReactDOM
UpdateQueue
Slide 53
Slide 53 text
ReactFiberReconciler.updateContainerAtExpirationTime()
ReactFiberScheduler.scheduleWork()
Slide 54
Slide 54 text
CommitWork
Reconciler
UpdateQueue
ReactDOM
Scheduler
Slide 55
Slide 55 text
ReactFiberScheduler.scheduleWork()
ReactFiberScheduler.scheduleWorkImpl()
ReactFiberScheduler.requestWork()
ReactFiberScheduler.performWorkOnRoot()
ReactFiberScheduler.completeRoot()
ReactFiberScheduler.commitRoot()
ReactFiberScheduler.performWork()
ReactFiberScheduler.commitAllHostEffects()
Slide 56
Slide 56 text
ReactFiberScheduler.commitAllHostEffects()
ReactFiberCommitWork.commitPlacement()
Slide 57
Slide 57 text
Reconciler
UpdateQueue
Scheduler
ReactDOM
CommitWork
Slide 58
Slide 58 text
ReactFiberCommitWork.commitPlacement()
appendChild()
Slide 59
Slide 59 text
appendChild Implementation
packages/react-dom/src/client/ReactDOM.js
Slide 60
Slide 60 text
We got Actual DOM
Slide 61
Slide 61 text
but React goes on!
thanks