10 min ReactDOM Codebase Overview

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

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