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
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
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
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