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
Everything I Know About React I Learned From Tw...
Search
Jenn Creighton
March 31, 2019
Programming
0
1.1k
Everything I Know About React I Learned From Twitter
Jenn Creighton
March 31, 2019
Tweet
Share
More Decks by Jenn Creighton
See All by Jenn Creighton
Understanding Iterators & Iterables in JavaScript
jenncreighton
0
110
React 16, the future & you (December 4, 2018)
jenncreighton
1
170
The how and why of flexible React components
jenncreighton
7
4k
The How and Why of Flexible React Components
jenncreighton
0
150
React 16, the future & you
jenncreighton
0
190
Other Decks in Programming
See All in Programming
距離関数を極める! / SESSIONS 2024
gam0022
0
290
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
Quine, Polyglot, 良いコード
qnighy
4
650
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
みんなでプロポーザルを書いてみた
yuriko1211
0
280
初めてDefinitelyTypedにPRを出した話
syumai
0
420
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
150
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
5
1.5k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
The Language of Interfaces
destraynor
154
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Done Done
chrislema
181
16k
KATA
mclloyd
29
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
How to Ace a Technical Interview
jacobian
276
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Happy Clients
brianwarren
98
6.7k
Transcript
Jenn Creighton (@gurlcode) FrontEnd Engineer @ Rent the RunwaY Everything
I know about React I learned from Twitter
React Detective ! @gurlcode
On a dark & stormy night… @gurlcode
@gurlcode
@gurlcode
@gurlcode
None
@gurlcode
Welcome! @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
<button /> @gurlcode
@gurlcode React.createElement(”button”, null);
{ type: button, props: { … } } React Element
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
{ tag child sibling return … } Fiber @gurlcode
Fiber type @gurlcode Fiber { tag child sibling return …
}
@gurlcode Fiber Child fiber { tag child sibling return …
} Fiber type
@gurlcode Fiber Child fiber Sibling fiber { tag child sibling
return … } Fiber type
@gurlcode Fiber Child fiber Sibling fiber Parent fiber { tag
child sibling return … } Fiber type
@gurlcode
reactInternalInstance @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode one-way two-way div h1 C div
@gurlcode
@gurlcode ReactDOM.unstable_createRoot(node)
@gurlcode new ReactRoot ReactDOM.unstable_createRoot(node)
@gurlcode createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node)
@gurlcode createFiberRoot createHostRootFiber new ReactRoot ReactDOM.unstable_createRoot(node)
@gurlcode createFiberRoot createFiber fiber { tag: HostRoot } new ReactRoot
ReactDOM.unstable_createRoot(node) HostRoot
@gurlcode root.current = fiber createFiber new ReactRoot ReactDOM.unstable_createRoot(node) HostRoot
@gurlcode createFiber new ReactRoot ReactDOM.unstable_createRoot(node) HostRoot
@gurlcode createFiber this._internalRoot = root ReactDOM.unstable_createRoot(node) HostRoot
@gurlcode createFiber root = ReactRoot HostRoot
@gurlcode
{ current: { tag: HostRoot } … } @gurlcode this._InternalRoot
@gurlcode root.render( ReactElement ) HostRoot
@gurlcode ReactRoot.render( ReactElement ) HostRoot
@gurlcode scheduleRootUpdate(current, element) HostRoot ReactRoot.render( ReactElement )
@gurlcode HostRoot ReactRoot.render( ReactElement ) update = { element: element
}
@gurlcode enqueueUpdate(update) HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)
{ alternate tag child sibling return updateQueue } @gurlcode Fiber
list of state updates
@gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)
@gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleWork( ) scheduleWork scheduleRootUpdate(current, element)
@gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)
@gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)
@gurlcode
@gurlcode HostRoot performWork
@gurlcode renderRoot HostRoot performWork
@gurlcode renderRoot HostRoot performWork createWorkInProgress(current)
@gurlcode renderRoot HostRoot performWork workInProgress = current.alternate
{ alternate tag child sibling return … } Pooled fiber
@gurlcode Fiber
@gurlcode
@gurlcode
@gurlcode renderRoot HostRoot performWork workInProgress === null
@gurlcode renderRoot HostRoot performWork workInProgress = current.alternate createFiber(current)
@gurlcode renderRoot HostRoot performWork current.alternate = workInProgress
@gurlcode renderRoot HostRoot performWork createWorkInProgress(current)
@gurlcode HostRoot performWork nextUnitOfWork = workInProgress
@gurlcode nextUnitOfWork = workInProgress HostRoot performWork workLoop
@gurlcode
fiber @gurlcode
@gurlcode HostRoot workLoop
@gurlcode HostRoot performUnitOfWork workLoop
@gurlcode HostRoot workLoop performUnitOfWork beginWork
@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot
@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot processUpdateQueue
@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot newState = { element:
element }
@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot fiber.memoizedState = newState
{ alternate tag child sibling return memoizedState … } @gurlcode
Fiber current state
@gurlcode HostRoot workLoop performUnitOfWork beginWork nextChild = fiber.memoizedState.element
@gurlcode HostRoot workLoop performUnitOfWork beginWork reconcileChildFibers(child, nextChild) nextChild = fiber.memoizedState.element
@gurlcode HostRoot performUnitOfWork beginWork workInProgress.child = createFiber( ) div workLoop
nextChild = fiber.memoizedState.element
@gurlcode HostRoot performUnitOfWork beginWork div workLoop return workInProgress.child
@gurlcode HostRoot performUnitOfWork div workLoop return workInProgress.child
@gurlcode HostRoot div workLoop return workInProgress.child
@gurlcode HostRoot nextUnitOfWork = performUnitWork div
@gurlcode HostRoot nextUnitOfWork !== null div
@gurlcode HostRoot workLoop div
@gurlcode HostRoot div performUnitOfWork workLoop
@gurlcode HostRoot div workLoop performUnitOfWork beginWork
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent
@gurlcode HostRoot div workLoop performUnitOfWork beginWork nextChild = fiber.pendingProps.children
{ alternate tag child sibling return memoizedState pendingProps … }
@gurlcode Fiber waiting to be applied
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers(child, nextChild)
@gurlcode HostRoot div reconcileChildrenArray workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers
@gurlcode HostRoot div child = createFiber( ) h1 workLoop performUnitOfWork
beginWork updateHostComponent reconcileChildFibers
@gurlcode HostRoot div child.sibling = createFiber( ) h1 C workLoop
performUnitOfWork beginWork updateHostComponent reconcileChildFibers
@gurlcode HostRoot div return child h1 C workLoop performUnitOfWork beginWork
updateHostComponent reconcileChildFibers
@gurlcode HostRoot div h1 C workLoop performUnitOfWork beginWork updateHostComponent workInProgress.child
= child
@gurlcode HostRoot div h1 C workLoop performUnitOfWork beginWork return workInProgress.child
@gurlcode HostRoot div h1 C workLoop performUnitOfWork return workInProgress.child
@gurlcode HostRoot div h1 C workLoop return workInProgress.child
@gurlcode HostRoot div h1 C nextUnitOfWork = performUnitWork
@gurlcode HostRoot div h1 C nextUnitOfWork !== null
@gurlcode HostRoot div workLoop h1 C
@gurlcode HostRoot div workLoop h1 C performUnitOfWork
@gurlcode HostRoot div workLoop h1 C performUnitOfWork beginWork
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C reconcileChildFibers
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C workInProgress.child
= null
@gurlcode HostRoot div workLoop performUnitOfWork beginWork h1 C return null
@gurlcode HostRoot div workLoop performUnitOfWork h1 C return null
@gurlcode HostRoot div workLoop nextUnitOfWork === null h1 C
@gurlcode HostRoot div workLoop performUnitOfWork h1 C completeUnitOfWork
@gurlcode HostRoot div h1 return workInProgress.child completeWork C workLoop performUnitOfWork
completeUnitOfWork
@gurlcode HostRoot div h1 return workInProgress.child C workLoop performUnitOfWork completeUnitOfWork
return fiber.sibling | | fiber.return
@gurlcode HostRoot div h1 return workInProgress.child C workLoop performUnitOfWork return
fiber.sibling
@gurlcode HostRoot div h1 return workInProgress.child C workLoop return fiber.sibling
return fiber.sibling
@gurlcode HostRoot div h1 return workInProgress.child C return fiber.sibling nextUnitOfWork
= performUnitOfWork nextUnitOfWork = performUnitOfWork
@gurlcode HostRoot div h1 C
@gurlcode HostRoot div h1 C div
@gurlcode HostRoot div h1 C div
@gurlcode HostRoot div h1 C div
@gurlcode HostRoot div h1 C div
@gurlcode HostRoot div h1 C div
@gurlcode
None
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode Component.prototype.setState
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update) enqueueUpdate(fiber, update)
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update) scheduleWork( )
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)
@gurlcode HostRoot performWork div div h1 C
@gurlcode HostRoot div div h1 C renderRoot performWork
@gurlcode HostRoot div div h1 C renderRoot performWork workInProgress =
current.alternate
@gurlcode HostRoot div div h1 C performWork nextUnitOfWork = workInProgress
@gurlcode HostRoot div div h1 C performWork nextUnitOfWork = workInProgress
workLoop
@gurlcode HostRoot div div h1 C workLoop
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop oldProps !==
newProps
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop return workInProgress.child
@gurlcode HostRoot div div h1 C workLoop return workInProgress.child
@gurlcode HostRoot div div h1 C workLoop
@gurlcode div h1 C div HostRoot
@gurlcode div h1 C div HostRoot
@gurlcode HostRoot div div h1 C workLoop
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
updateClassInstance
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
updateClassInstance processUpdateQueue
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
updateClassInstance fiber.memoizedState = newState
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork instance.state
= fiber.memoizedState
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork nextChild
= instance.render( )
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
reconcileChildFibers
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
fiber.effectTag = Update
{ alternate tag child sibling return memoizedState pendingProps effectTag …
} @gurlcode Fiber work to be done
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
return workInProgress.child
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork return
workInProgress.child
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop return workInProgress.child
@gurlcode HostRoot div div h1 C workLoop return workInProgress.child
@gurlcode HostRoot div div h1 C workLoop
@gurlcode HostRoot div h1 C div
@gurlcode div h1 C div
@gurlcode f f f f
@gurlcode VDOM
@gurlcode
@gurlcode fn fn fn
@gurlcode fn fn fn fn When a function is called,
a new stack frame is added
@gurlcode fiber Fibers are virtual stack frames fiber fiber fiber
@gurlcode
Thank You! @gurlcode Huge shoutout to the React core team