10 min ReactDOM Codebase Overview

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. *
   XBOU
   UP
   QBSUJDJQBUF
   JO
   UIF
   3FBDU
   044
   1SPKFDU CVU
   J
   EPO`U
   VOEFSTUBOE
   3FBDU
   *NQM
   DPEF
   BU
   BMM

7. 4PVSDF
   $PEF
   3FBEJOH!

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