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
160
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
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
640
Jakarta EE meets AI
ivargrimstad
1
520
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
680
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
The Shape of a Service Object
inem
0
520
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
A New Era of Testing
mannodermaus
2
510
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Making Projects Easy
brettharned
113
5.8k
In The Pink: A Labor of Love
frogandcode
139
22k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Fireside Chat
paigeccino
31
2.9k
How to Ace a Technical Interview
jacobian
274
23k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
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