function mount(component) {
if (host component)
// create DOM node
// mount children
}
Slide 35
Slide 35 text
function mount(component) {
if (host component)
// create DOM node
// mount children
if (composite component)
// call render() of component
// mount the result of render()
}
Slide 36
Slide 36 text
What happens if I call
ReactDOM.render() again?
Slide 37
Slide 37 text
SillyDiv
Slide 38
Slide 38 text
div
button p
SillyDiv
Slide 39
Slide 39 text
div
button p
SillyDiv mount()
mount()
mount() mount()
Slide 40
Slide 40 text
class DOMComponent {
}
class
CompositeComponent {
}
Slide 41
Slide 41 text
class DOMComponent {
mount()
}
class
CompositeComponent {
mount()
}
Slide 42
Slide 42 text
class DOMComponent {
currentElement
mount()
}
class
CompositeComponent {
currentElement
mount()
}
Slide 43
Slide 43 text
class DOMComponent {
currentElement
renderedChildren
mount()
}
class
CompositeComponent {
currentElement
renderedElement
mount()
}
Slide 44
Slide 44 text
class DOMComponent {
currentElement
renderedChildren
node
mount()
}
class
CompositeComponent {
currentElement
renderedElement
publicInstance
mount()
}
Slide 45
Slide 45 text
A word about terminology...
Slide 46
Slide 46 text
class DOMComponent {
currentElement
renderedChildren
node
mount()
}
class
CompositeComponent {
currentElement
renderedElement
publicInstance
mount()
}
Slide 47
Slide 47 text
So, what about updates?
Slide 48
Slide 48 text
class DOMComponent {
currentElement
renderedChildren
node
mount()
}
class
CompositeComponent {
currentElement
renderedElement
publicInstance
mount()
}
Slide 49
Slide 49 text
class DOMComponent {
currentElement
renderedChildren
node
mount()
receive(nextEl)
}
class
CompositeComponent {
currentElement
renderedElement
publicInstance
mount()
receive(nextEl)
}
Slide 50
Slide 50 text
function receive(nextEl) {
}
Slide 51
Slide 51 text
function receive(nextEl) {
// figure out next rendered element
// if same type, call receive()
// otherwise, make changes
}
Slide 52
Slide 52 text
function receive(nextEl) {
// figure out next rendered element
// if same type, call receive()
// otherwise, make changes
}
Slide 53
Slide 53 text
function receive(nextEl) {
// figure out next rendered element
// if same type, call receive()
// otherwise, make changes
}
Slide 54
Slide 54 text
What could possibly go wrong?
Slide 55
Slide 55 text
div
button p
SillyDiv
Slide 56
Slide 56 text
div
button p
SillyDiv
Box
...
...
...
Slide 57
Slide 57 text
The JS event loop
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
render
paint
process
messages
Slide 60
Slide 60 text
render
paint
process
messages
div
button p
SillyDiv
Slide 61
Slide 61 text
render
paint
process
messages
...
...
...
Slide 62
Slide 62 text
render
paint
process
messages
...
...
...
Slide 63
Slide 63 text
What have we learned about
React <16?
Slide 64
Slide 64 text
React 16: “Fiber”
Slide 65
Slide 65 text
isfiberreadyyet.com
Slide 66
Slide 66 text
Core idea:
Separate renconciliation from rendering
Slide 67
Slide 67 text
“Render” vs “commit” phases
Slide 68
Slide 68 text
What is a fiber?
Slide 69
Slide 69 text
{
}
Slide 70
Slide 70 text
{
stateNode
}
Slide 71
Slide 71 text
{
stateNode
child
}
Slide 72
Slide 72 text
{
stateNode
child
sibling
}
Slide 73
Slide 73 text
{
stateNode
child
sibling
return
}
Slide 74
Slide 74 text
Representing components with fibers
Slide 75
Slide 75 text
div
button p
SillyDiv
Slide 76
Slide 76 text
div
button p
SillyDiv
CompositeComponent
DOMComponent
Slide 77
Slide 77 text
div
button p
SillyDiv
fiber
fiber
fiber fiber
Slide 78
Slide 78 text
div
button p
SillyDiv
child
Slide 79
Slide 79 text
div
button p
SillyDiv
child return
Slide 80
Slide 80 text
div
button p
SillyDiv
child return
child
Slide 81
Slide 81 text
div
button p
SillyDiv
child return
child
sibling
Slide 82
Slide 82 text
div
button p
SillyDiv
child return
child
sibling
return
return
Slide 83
Slide 83 text
Life of an update
Slide 84
Slide 84 text
div
button p
SillyDiv
Slide 85
Slide 85 text
div
button p
SillyDiv
setState()
Slide 86
Slide 86 text
div
button p
SillyDiv
updateQueue
Slide 87
Slide 87 text
div
button p
SillyDiv
updateQueue
scheduleWork()
Slide 88
Slide 88 text
requestIdleCallback
Slide 89
Slide 89 text
div
button p
SillyDiv
Slide 90
Slide 90 text
div
button p
SillyDiv
Slide 91
Slide 91 text
div
button p
SillyDiv
Slide 92
Slide 92 text
div
button p
SillyDiv
Slide 93
Slide 93 text
div
button p
SillyDiv
Slide 94
Slide 94 text
div
button p
SillyDiv
Slide 95
Slide 95 text
div
button p
SillyDiv
Slide 96
Slide 96 text
div
button p
SillyDiv
Slide 97
Slide 97 text
div
button p
SillyDiv
Slide 98
Slide 98 text
div
button p
SillyDiv
workInProgress
Slide 99
Slide 99 text
div
button p
SillyDiv
div
button p
SillyDiv
workInProgress current
Slide 100
Slide 100 text
div
button p
SillyDiv
div
button p
SillyDiv
current workInProgress
Slide 101
Slide 101 text
Great, but so what?
Slide 102
Slide 102 text
div
button p
SillyDiv
workInProgress
Slide 103
Slide 103 text
div
button p
SillyDiv
workInProgress
Slide 104
Slide 104 text
div
button p
SillyDiv
workInProgress
Slide 105
Slide 105 text
div
button p
SillyDiv
workInProgress
Slide 106
Slide 106 text
div
button p
SillyDiv
New work
arrives
workInProgress
Slide 107
Slide 107 text
div
button p
SillyDiv
Example 1:
High priority
update
workInProgress
Slide 108
Slide 108 text
div
button p
SillyDiv
workInProgress
updateQueue
Slide 109
Slide 109 text
div
button p
SillyDiv
workInProgress
updateQueue
scheduleWork()
Slide 110
Slide 110 text
div
button p
SillyDiv
Example 2:
Animation
update
workInProgress