Last active
September 30, 2019 19:01
-
-
Save a-laughlin/1f26f3b1f354c7642cee91320d23ad45 to your computer and use it in GitHub Desktop.
React UI App Progression time steps, for graph decomposition per step.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// assumes create-react-app, and files served from src/ | |
T0: define time | |
file tree exists. Nothing imported. Static intra-file code graphs exist. | |
T1: JS run time starts. | |
index.js imports files: | |
Functions in imported files run: JS graphs updated. | |
Conceptual component graph exists. | |
T2: React run time starts | |
App Component runs. Virtual dom root exists. | |
loop: | |
children components run, forming branches and leaves on the virtual dom tree | |
async events pushed out on event loop | |
Synchronous Element tree (Virtual Dom) instantiated | |
All initial states defined | |
T3: Async event loop starts | |
loop: | |
case: component arrives (suspense) | |
... | |
case: data arrives | |
... | |
case: browser event | |
... | |
flurry of Component graph updates as lifecycle methods and related conditionals run |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment