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

10 min ReactDOM Codebase Overview

B69d87227f47a962eddbb6979e85564e?s=47 ryota-murakami
February 01, 2018
1.3k

10 min ReactDOM Codebase Overview

React.js meetup #5 2018/02/01(木) の発表資料です。

B69d87227f47a962eddbb6979e85564e?s=128

ryota-murakami

February 01, 2018
Tweet

Transcript

  1. 10 min ReactDOM Codebase Overview Ryota Murakami (@malloc007) React.js meetup

    #5 2018/02/01
  2. ɾUnemployed but currently accepting React Native Job ɾFavorite JavaScript Programming,

    Open Source ɾDon’t have a CS degree !
  3. ɾEspecially fascinating React core team programming practice

  4. None
  5. Motivation

  6. *XBOUUPQBSUJDJQBUFJOUIF3FBDU0441SPKFDU CVUJEPO`UVOEFSTUBOE3FBDU*NQMDPEFBUBMM

  7. 4PVSDF$PEF3FBEJOH!

  8. Introduction

  9. React = Monorepo Codebase

  10. Contain some packages, so

  11. Today Topics ɾReact Top-Level API ɾReactDOM ɾEspecially client-side first rendering

  12. React Top-Level API

  13. React Top-Level API

  14. packages/react/package.json

  15. packages/react/index.js

  16. packages/react/src/React.js ~~

  17. We can import & using

  18. Next…

  19. ReactDOM

  20. ReactDOM

  21. packages/react-dom/index.js

  22. packages/react-dom/src/client/ReactDOM.js

  23. huge codebase

  24. Fundamental Knowledge

  25. https://www.codecademy.com/articles/react-virtual-dom

  26. onece Node.appendChild() call Calculate finally content on Virtual DOM

  27. onece Node.appendChild() call Calculate finally content on Virtual DOM

  28. https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html functional component Component React Elements

  29. 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
  30. https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html functional component Component React Elements In order to Virtual

    DOM calculation
  31. https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html functional component Component React Elements Reconciler calculate state change

    etc…
  32. Really simplified ReactDOM overview

  33. ɾpackages/react-dom ɾpackages/react-reconciler Related Packages

  34. ɾpackages/react-dom ɾpackages/react-reconciler named React Fiber Related Packages

  35. None
  36. UpdateQueue Scheduler CommitWork Reconciler ReactDOM

  37. UpdateQueue Scheduler CommitWork Reconciler ReactDOM Rendering Actual DOM

  38. packages/react-dom/src/client/ReactDOM.js ReactDOM.render() definition

  39. Trace callstack initial rendering

  40. ReactDOM.render() ReactDOM.legacyRenderSubtreeIntoContainer()

  41. ReactDOM.legacyRenderSubtreeIntoContainer()

  42. root?

  43. ReactRoot

  44. ReactDOM.legacyRenderSubtreeIntoContainer() ReactRoot.render()

  45. ReactRoot.render()

  46. DOMRenderer?

  47. DOMRenderer = ReactFiberReconciler

  48. DOMRenderer.updateContainer() = ReactFiberReconciler.updateContainer()

  49. ReactFiberReconciler.updateContainer() ReactFiberReconciler.updateContainerAtExpirationTime()

  50. ReactFiberReconciler.updateContainerAtExpirationTime() ReactFiberReconciler.insertUpdateIntoFiber()

  51. ReactFiberReconciler.insertUpdateIntoFiber() createUpdateQueue()

  52. Scheduler CommitWork Reconciler ReactDOM UpdateQueue

  53. ReactFiberReconciler.updateContainerAtExpirationTime() ReactFiberScheduler.scheduleWork()

  54. CommitWork Reconciler UpdateQueue ReactDOM Scheduler

  55. ReactFiberScheduler.scheduleWork() ReactFiberScheduler.scheduleWorkImpl() ReactFiberScheduler.requestWork() ReactFiberScheduler.performWorkOnRoot() ReactFiberScheduler.completeRoot() ReactFiberScheduler.commitRoot() ReactFiberScheduler.performWork() ReactFiberScheduler.commitAllHostEffects()

  56. ReactFiberScheduler.commitAllHostEffects() ReactFiberCommitWork.commitPlacement()

  57. Reconciler UpdateQueue Scheduler ReactDOM CommitWork

  58. ReactFiberCommitWork.commitPlacement() appendChild()

  59. appendChild Implementation packages/react-dom/src/client/ReactDOM.js

  60. We got Actual DOM

  61. but React goes on! thanks