Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Everything I Know About React I Learned From Twitter

Everything I Know About React I Learned From Twitter

Aaaf75447dba53a3de9a5c41d6c2e060?s=128

Jenn Creighton

March 31, 2019
Tweet

Transcript

  1. Jenn Creighton (@gurlcode) FrontEnd Engineer @ Rent the RunwaY Everything

    I know about React I learned from Twitter
  2. React Detective ! @gurlcode

  3. On a dark & stormy night… @gurlcode

  4. @gurlcode

  5. @gurlcode

  6. @gurlcode

  7. None
  8. @gurlcode

  9. Welcome! @gurlcode

  10. @gurlcode

  11. @gurlcode

  12. @gurlcode

  13. @gurlcode

  14. <button /> @gurlcode

  15. @gurlcode React.createElement(”button”, null);

  16. { type: button, props: { … } } React Element

    @gurlcode
  17. @gurlcode

  18. @gurlcode

  19. @gurlcode

  20. @gurlcode

  21. @gurlcode

  22. @gurlcode

  23. @gurlcode

  24. { tag child sibling return … } Fiber @gurlcode

  25. Fiber type @gurlcode Fiber { tag child sibling return …

    }
  26. @gurlcode Fiber Child fiber { tag child sibling return …

    } Fiber type
  27. @gurlcode Fiber Child fiber Sibling fiber { tag child sibling

    return … } Fiber type
  28. @gurlcode Fiber Child fiber Sibling fiber Parent fiber { tag

    child sibling return … } Fiber type
  29. @gurlcode

  30. reactInternalInstance @gurlcode

  31. @gurlcode

  32. @gurlcode

  33. @gurlcode

  34. @gurlcode

  35. @gurlcode

  36. @gurlcode one-way two-way div h1 C div

  37. @gurlcode

  38. @gurlcode ReactDOM.unstable_createRoot(node)

  39. @gurlcode new ReactRoot ReactDOM.unstable_createRoot(node)

  40. @gurlcode createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node)

  41. @gurlcode createFiberRoot createHostRootFiber new ReactRoot ReactDOM.unstable_createRoot(node)

  42. @gurlcode createFiberRoot createFiber fiber { tag: HostRoot } new ReactRoot

    ReactDOM.unstable_createRoot(node) HostRoot
  43. @gurlcode root.current = fiber createFiber new ReactRoot ReactDOM.unstable_createRoot(node) HostRoot

  44. @gurlcode createFiber new ReactRoot ReactDOM.unstable_createRoot(node) HostRoot

  45. @gurlcode createFiber this._internalRoot = root ReactDOM.unstable_createRoot(node) HostRoot

  46. @gurlcode createFiber root = ReactRoot HostRoot

  47. @gurlcode

  48. { current: { tag: HostRoot } … } @gurlcode this._InternalRoot

  49. @gurlcode root.render( ReactElement ) HostRoot

  50. @gurlcode ReactRoot.render( ReactElement ) HostRoot

  51. @gurlcode scheduleRootUpdate(current, element) HostRoot ReactRoot.render( ReactElement )

  52. @gurlcode HostRoot ReactRoot.render( ReactElement ) update = { element: element

    }
  53. @gurlcode enqueueUpdate(update) HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)

  54. { alternate tag child sibling return updateQueue } @gurlcode Fiber

    list of state updates
  55. @gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)

  56. @gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleWork( ) scheduleWork scheduleRootUpdate(current, element)

  57. @gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)

  58. @gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)

  59. @gurlcode

  60. @gurlcode HostRoot performWork

  61. @gurlcode renderRoot HostRoot performWork

  62. @gurlcode renderRoot HostRoot performWork createWorkInProgress(current)

  63. @gurlcode renderRoot HostRoot performWork workInProgress = current.alternate

  64. { alternate tag child sibling return … } Pooled fiber

    @gurlcode Fiber
  65. @gurlcode

  66. @gurlcode

  67. @gurlcode renderRoot HostRoot performWork workInProgress === null

  68. @gurlcode renderRoot HostRoot performWork workInProgress = current.alternate createFiber(current)

  69. @gurlcode renderRoot HostRoot performWork current.alternate = workInProgress

  70. @gurlcode renderRoot HostRoot performWork createWorkInProgress(current)

  71. @gurlcode HostRoot performWork nextUnitOfWork = workInProgress

  72. @gurlcode nextUnitOfWork = workInProgress HostRoot performWork workLoop

  73. @gurlcode

  74. fiber @gurlcode

  75. @gurlcode HostRoot workLoop

  76. @gurlcode HostRoot performUnitOfWork workLoop

  77. @gurlcode HostRoot workLoop performUnitOfWork beginWork

  78. @gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot

  79. @gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot processUpdateQueue

  80. @gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot newState = { element:

    element }
  81. @gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot fiber.memoizedState = newState

  82. { alternate tag child sibling return memoizedState … } @gurlcode

    Fiber current state
  83. @gurlcode HostRoot workLoop performUnitOfWork beginWork nextChild = fiber.memoizedState.element

  84. @gurlcode HostRoot workLoop performUnitOfWork beginWork reconcileChildFibers(child, nextChild) nextChild = fiber.memoizedState.element

  85. @gurlcode HostRoot performUnitOfWork beginWork workInProgress.child = createFiber( ) div workLoop

    nextChild = fiber.memoizedState.element
  86. @gurlcode HostRoot performUnitOfWork beginWork div workLoop return workInProgress.child

  87. @gurlcode HostRoot performUnitOfWork div workLoop return workInProgress.child

  88. @gurlcode HostRoot div workLoop return workInProgress.child

  89. @gurlcode HostRoot nextUnitOfWork = performUnitWork div

  90. @gurlcode HostRoot nextUnitOfWork !== null div

  91. @gurlcode HostRoot workLoop div

  92. @gurlcode HostRoot div performUnitOfWork workLoop

  93. @gurlcode HostRoot div workLoop performUnitOfWork beginWork

  94. @gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent

  95. @gurlcode HostRoot div workLoop performUnitOfWork beginWork nextChild = fiber.pendingProps.children

  96. { alternate tag child sibling return memoizedState pendingProps … }

    @gurlcode Fiber waiting to be applied
  97. @gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers(child, nextChild)

  98. @gurlcode HostRoot div reconcileChildrenArray workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers

  99. @gurlcode HostRoot div child = createFiber( ) h1 workLoop performUnitOfWork

    beginWork updateHostComponent reconcileChildFibers
  100. @gurlcode HostRoot div child.sibling = createFiber( ) h1 C workLoop

    performUnitOfWork beginWork updateHostComponent reconcileChildFibers
  101. @gurlcode HostRoot div return child h1 C workLoop performUnitOfWork beginWork

    updateHostComponent reconcileChildFibers
  102. @gurlcode HostRoot div h1 C workLoop performUnitOfWork beginWork updateHostComponent workInProgress.child

    = child
  103. @gurlcode HostRoot div h1 C workLoop performUnitOfWork beginWork return workInProgress.child

  104. @gurlcode HostRoot div h1 C workLoop performUnitOfWork return workInProgress.child

  105. @gurlcode HostRoot div h1 C workLoop return workInProgress.child

  106. @gurlcode HostRoot div h1 C nextUnitOfWork = performUnitWork

  107. @gurlcode HostRoot div h1 C nextUnitOfWork !== null

  108. @gurlcode HostRoot div workLoop h1 C

  109. @gurlcode HostRoot div workLoop h1 C performUnitOfWork

  110. @gurlcode HostRoot div workLoop h1 C performUnitOfWork beginWork

  111. @gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C

  112. @gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C reconcileChildFibers

  113. @gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C workInProgress.child

    = null
  114. @gurlcode HostRoot div workLoop performUnitOfWork beginWork h1 C return null

  115. @gurlcode HostRoot div workLoop performUnitOfWork h1 C return null

  116. @gurlcode HostRoot div workLoop nextUnitOfWork === null h1 C

  117. @gurlcode HostRoot div workLoop performUnitOfWork h1 C completeUnitOfWork

  118. @gurlcode HostRoot div h1 return workInProgress.child completeWork C workLoop performUnitOfWork

    completeUnitOfWork
  119. @gurlcode HostRoot div h1 return workInProgress.child C workLoop performUnitOfWork completeUnitOfWork

    return fiber.sibling | | fiber.return
  120. @gurlcode HostRoot div h1 return workInProgress.child C workLoop performUnitOfWork return

    fiber.sibling
  121. @gurlcode HostRoot div h1 return workInProgress.child C workLoop return fiber.sibling

    return fiber.sibling
  122. @gurlcode HostRoot div h1 return workInProgress.child C return fiber.sibling nextUnitOfWork

    = performUnitOfWork nextUnitOfWork = performUnitOfWork
  123. @gurlcode HostRoot div h1 C

  124. @gurlcode HostRoot div h1 C div

  125. @gurlcode HostRoot div h1 C div

  126. @gurlcode HostRoot div h1 C div

  127. @gurlcode HostRoot div h1 C div

  128. @gurlcode HostRoot div h1 C div

  129. @gurlcode

  130. None
  131. @gurlcode

  132. @gurlcode

  133. @gurlcode

  134. @gurlcode

  135. @gurlcode Component.prototype.setState

  136. @gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)

  137. @gurlcode HostRoot div div h1 C enqueueSetState(fiber, update) enqueueUpdate(fiber, update)

  138. @gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)

  139. @gurlcode HostRoot div div h1 C enqueueSetState(fiber, update) scheduleWork( )

  140. @gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)

  141. @gurlcode HostRoot performWork div div h1 C

  142. @gurlcode HostRoot div div h1 C renderRoot performWork

  143. @gurlcode HostRoot div div h1 C renderRoot performWork workInProgress =

    current.alternate
  144. @gurlcode HostRoot div div h1 C performWork nextUnitOfWork = workInProgress

  145. @gurlcode HostRoot div div h1 C performWork nextUnitOfWork = workInProgress

    workLoop
  146. @gurlcode HostRoot div div h1 C workLoop

  147. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop

  148. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork

  149. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop oldProps !==

    newProps
  150. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop return workInProgress.child

  151. @gurlcode HostRoot div div h1 C workLoop return workInProgress.child

  152. @gurlcode HostRoot div div h1 C workLoop

  153. @gurlcode div h1 C div HostRoot

  154. @gurlcode div h1 C div HostRoot

  155. @gurlcode HostRoot div div h1 C workLoop

  156. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop

  157. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork

  158. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent

  159. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent

    updateClassInstance
  160. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent

    updateClassInstance processUpdateQueue
  161. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent

    updateClassInstance fiber.memoizedState = newState
  162. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork instance.state

    = fiber.memoizedState
  163. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork nextChild

    = instance.render( )
  164. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent

    reconcileChildFibers
  165. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent

    fiber.effectTag = Update
  166. { alternate tag child sibling return memoizedState pendingProps effectTag …

    } @gurlcode Fiber work to be done
  167. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent

    return workInProgress.child
  168. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork return

    workInProgress.child
  169. @gurlcode HostRoot div div h1 C performUnitOfWork workLoop return workInProgress.child

  170. @gurlcode HostRoot div div h1 C workLoop return workInProgress.child

  171. @gurlcode HostRoot div div h1 C workLoop

  172. @gurlcode HostRoot div h1 C div

  173. @gurlcode div h1 C div

  174. @gurlcode f f f f

  175. @gurlcode VDOM

  176. @gurlcode

  177. @gurlcode fn fn fn

  178. @gurlcode fn fn fn fn When a function is called,

    a new stack frame is added
  179. @gurlcode fiber Fibers are virtual stack frames fiber fiber fiber

  180. @gurlcode

  181. Thank You! @gurlcode Huge shoutout to the React core team