/
7.1 hook 原理：多个 hook.txt
154 lines (154 loc) · 12.4 KB
/
7.1 hook 原理：多个 hook.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
[0] render [start]
[1] legacyRenderSubtreeIntoContainer
[2] unbatchedUpdates
[3] fn
[4] updateContainer
[5] scheduleUpdateOnFiber
[6] performSyncWorkOnRoot
[7] renderRootSync
[8] prepareFreshStack
[9] createWorkInProgress
[10] createFiber
[8] markRenderStarted
[8] workLoopSync
[9] performUnitOfWork ---- [HostRoot {tag: 3}]
[9] performUnitOfWork ---- [IndeterminateComponent {tag: 2}] (<App />)
[10] beginWork$1
[11] beginWork
[12] mountIndeterminateComponent
[13] renderWithHooks
[14] Component
[15] App [start]
[15] useState (call)
[16] dispatcher.useState
[17] mountState
[18] mountWorkInProgressHook
[19] (workInProgressHook === null) true
[15] App [back to]
[15] useState (call)
[16] dispatcher.useState
[17] mountState
[18] mountWorkInProgressHook
[19] (workInProgressHook === null) [false]
[19] (workInProgressHook = workInProgressHook.next = hook)
[15] App [back to]
[9] performUnitOfWork ---- [HostText {tag: 5}] (<div />)
[10] beginWork$1
[10] completeUnitOfWork
[11] completeWork ---- [HostText {tag: 5}] (<div />)
[11] completeWork ---- [IndeterminateComponent {tag: 2}] (<App />)
[11] completeWork ---- [HostRoot {tag: 3}]
[7] commitRoot
[8] getCurrentPriorityLevel
[9] Scheduler_getCurrentPriorityLevel
[8] runWithPriority$1
[9] reactPriorityToSchedulerPriority
[9] Scheduler_runWithPriority
[10] eventHandler=commitRootImpl
[11] markCommitStarted
[11] markCommitStopped
[1] render [return]
[0] user click [start]
[1] discreteUpdates
[2] discreteUpdatesImpl=discreteUpdates$1
[3] runWithPriority$1
[4] Scheduler_runWithPriority
[5] eventHandler=dispatchEvent
[6] attemptToDispatchEvent
[7] dispatchEventForPluginEventSystem
[8] batchedEventUpdates
[9] batchedEventUpdatesImpl
[10] fn
[11] dispatchEventsForPlugins
[12] processDispatchQueue
[13] processDispatchQueueItemsInOrder
[14] executeDispatch
[15] invokeGuardedCallbackAndCatchFirstError
[16] invokeGuardedCallback
[17] invokeGuardedCallbackImpl$1
[18] fakeNode.dispatchEvent
[19] func.apply
[20] onDivClick [start]
[20] setState1 [call]
[21] lastRenderedReducer
[21] objectIs ({1} {0})
[21] scheduleUpdateOnFiber
[22] checkForNestedUpdates
[22] warnAboutRenderPhaseUpdatesInDEV
[22] markUpdateLaneFromFiberToRoot
[22] markRootUpdated
[22] getCurrentPriorityLevel
[22] ensureRootIsScheduled
[23] markStarvedLanesAsExpired
[23] getNextLanes
[23] returnNextLanesPriority
[23] scheduleSyncCallback (syncQueue = [callback=performSyncWorkOnRoot])
[24] Scheduler_scheduleCallback=unstable_scheduleCallback
[22] schedulePendingInteractions
[23] scheduleInteractions
[21] markStateUpdateScheduled
[21] setState1 [return]
[20] onDivClick [back to]
[20] setState2 [call]
[21] scheduleUpdateOnFiber
[22] ensureRootIsScheduled
[21] setState2 [return]
[20] onDivClick [return]
[3] flushSyncCallbackQueue
[4] Scheduler_cancelCallback
[4] flushSyncCallbackQueueImpl (syncQueue = [callback=performSyncWorkOnRoot])
[5] runWithPriority$1
[6] Scheduler_runWithPriority=unstable_runWithPriority
[7] eventHandler
[8] callback=performSyncWorkOnRoot (22897)
[9] renderRootSync
[10] markRenderStarted [render start]
[10] workLoopSync
[11] performUnitOfWork {tag: 3}
[12] beginWork$1
[13] beginWork
[14] bailoutOnAlreadyFinishedWork
[11] performUnitOfWork {tag: 0} (<App />)
[12] beginWork$1
[13] beginWork
[14] updateFunctionComponent
[15] renderWithHooks
[16] Component
[17] App [start]
[17] useState [call]
[18] dispatcher.useState
[20] updateState
[21] updateReducer
[22] updateWorkInProgressHook {baseState: 0}
[22] objectIs
[22] markWorkInProgressReceivedUpdate
[17] App [back to]
[17] useState [call]
[18] dispatcher.useState
[19] updateState
[20] updateReducer
[21] updateWorkInProgressHook
[22] (currentHook === null) [false]
[22] (nextCurrentHook = currentHook {baseState: 0}.next {baseState: 'a'})
[22] (update.eagerReducer === reducer) [false]
[22] reducer
[22] objectIs
[22] markWorkInProgressReceivedUpdate
[17] App [back to]
[17] App [return]
[11] performUnitOfWork {tag: 5} (<div />)
[12] beginWork$1
[13] beginWork
[14] updateHostComponent
[12] completeUnitOfWork
[13] completeWork {tag: 5} (<div />)
[13] completeWork {tag: 0} (<App />)
[13] completeWork {tag: 3}
[10] markRenderStopped [render end]
[9] commitRoot
[10] runWithPriority$1
[11] Scheduler_runWithPriority
[12] eventHandler=commitRootImpl
[13] markCommitStarted [commit start]
[13] markCommitStopped [commit end]
[1] user click [end]