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

10 min ReactDOM Codebase Overview

ryota-murakami
February 01, 2018
1.6k

10 min ReactDOM Codebase Overview

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

ryota-murakami

February 01, 2018
Tweet

Transcript

  1. 10 min ReactDOM Codebase Overview
    Ryota Murakami (@malloc007)
    React.js meetup #5
    2018/02/01

    View Slide

  2. ɾUnemployed but currently accepting React Native Job
    ɾFavorite JavaScript Programming, Open Source
    ɾDon’t have a CS degree !

    View Slide

  3. ɾEspecially fascinating React core team programming practice

    View Slide

  4. View Slide

  5. Motivation

    View Slide

  6. *XBOUUPQBSUJDJQBUFJOUIF3FBDU0441SPKFDU
    CVUJEPO`UVOEFSTUBOE3FBDU*NQMDPEFBUBMM

    View Slide

  7. 4PVSDF$PEF3FBEJOH!

    View Slide

  8. Introduction

    View Slide

  9. React = Monorepo Codebase

    View Slide

  10. Contain some packages, so

    View Slide

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

    View Slide

  12. React Top-Level API

    View Slide

  13. React Top-Level API

    View Slide

  14. packages/react/package.json

    View Slide

  15. packages/react/index.js

    View Slide

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

    View Slide

  17. We can import & using

    View Slide

  18. Next…

    View Slide

  19. ReactDOM

    View Slide

  20. ReactDOM

    View Slide

  21. packages/react-dom/index.js

    View Slide

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

    View Slide


  23. huge codebase

    View Slide

  24. Fundamental Knowledge

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  32. Really simplified ReactDOM overview

    View Slide

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

    View Slide

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

    View Slide

  35. View Slide

  36. UpdateQueue
    Scheduler
    CommitWork
    Reconciler
    ReactDOM

    View Slide

  37. UpdateQueue
    Scheduler
    CommitWork
    Reconciler
    ReactDOM
    Rendering Actual DOM

    View Slide

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

    View Slide

  39. Trace callstack initial rendering

    View Slide

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

    View Slide

  41. ReactDOM.legacyRenderSubtreeIntoContainer()

    View Slide

  42. root?

    View Slide

  43. ReactRoot

    View Slide

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

    View Slide

  45. ReactRoot.render()

    View Slide

  46. DOMRenderer?

    View Slide

  47. DOMRenderer = ReactFiberReconciler

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. ReactFiberReconciler.insertUpdateIntoFiber()
    createUpdateQueue()

    View Slide

  52. Scheduler
    CommitWork
    Reconciler
    ReactDOM
    UpdateQueue

    View Slide

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

    View Slide

  54. CommitWork
    Reconciler
    UpdateQueue
    ReactDOM
    Scheduler

    View Slide

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

    View Slide

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

    View Slide

  57. Reconciler
    UpdateQueue
    Scheduler
    ReactDOM
    CommitWork

    View Slide

  58. ReactFiberCommitWork.commitPlacement()
    appendChild()

    View Slide

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

    View Slide

  60. We got Actual DOM

    View Slide

  61. but React goes on!
    thanks

    View Slide