/
7.2 hook 原理：多次调用.txt
166 lines (166 loc) · 15.1 KB
/
7.2 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
155
156
157
158
159
160
161
162
163
164
165
166
[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] setState [call]
[21] requestUpdateLane
[21] lastRenderedReducer=basicStateReducer
[22] action
[23] (in setState callback)
[21] (update.eagerState {null} = eagerState {1})
[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] setState [return]
[20] onDivClick [back to]
[20] setState [call]
[21] requestEventTime
[21] requestUpdateLane
[21] (update = {action: s => s+2})
[21] (update {eagerState: null, action: s=>s+2} .next {null} = pending.next {eagerState:1, action: s=> s+1})
[21] (pending.next {eagerState:1, action: s=> s+1} = update {eagerState: null, action: s=>s+2})
[21] (queue.pending = update) [queue.pending -> {s=>s+2} .next -> {s=>s+1}]
[21] (fiber.lanes {1} === NoLanes {0} && (alternate === null || alternate.lanes === NoLanes)) [false]
[21] scheduleUpdateOnFiber
[22] checkForNestedUpdates
[22] warnAboutRenderPhaseUpdatesInDEV
[22] markUpdateLaneFromFiberToRoot
[22] markRootUpdated
[22] getCurrentPriorityLevel
[22] ensureRootIsScheduled
[22] schedulePendingInteractions
[21] markStateUpdateScheduled
[21] setState [return]
[20] onDivClick [back to]
[20] onDivClick [return]
[3] resetRenderTimer
[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] flushPassiveEffects
[9] renderRootSync
[10] prepareFreshStack
[11] createWorkInProgress
[12] (workInProgress {tag: 3} === null) [false]
[12] (workInProgress {tag: 3} .child {null} = current {tag: 3} .child {tag: 0})
[10] startWorkOnPendingInteractions
[10] markRenderStarted [render start]
[10] workLoopSync
[11] performUnitOfWork {tag: 3}
[12] beginWork$1
[13] beginWork
[14] bailoutOnAlreadyFinishedWork
[15] markSkippedUpdateLanes
[15] cloneChildFibers
[16] createWorkInProgress
[17] createFiber
[17] (workInProgress {tag: 0} .child {null} = current {tag: 0} .child {tag: 5})
[11] performUnitOfWork {tag: 0} (<App />)
[12] beginWork$1
[13] beginWork
[14] updateFunctionComponent
[15] renderWithHooks
[16] Component
[17] App [start]
[17] useState [call]
[18] resolveDispatcher
[18] dispatcher.useState
[19] updateHookTypesDev
[20] updateState
[21] updateReducer
[22] updateWorkInProgressHook
[22] reducer {newState:1, action: s=>s+2}
[23] action
[24] (in setState callback)
[22] (update !== null && update !== first) [false]
[22] objectIs [false]
[22] markWorkInProgressReceivedUpdate
[18] useState [return]
[18] App [end]
[15] reconcileChildren
[16] reconcileChildFibers
[17] reconcileSingleElement
[18] useFiber
[19] createWorkInProgress
[20] createFiber
[20] (workInProgress {tag: 5} .child {null} = current {tag: 5} .child {null})
[18] coerceRef
[17] placeSingleChild
[11] performUnitOfWork {tag: 5} (<div />)
[12] beginWork$1
[13] beginWork
[14] updateHostComponent
[15] reconcileChildren
[16] reconcileChildFibers
[17] deleteRemainingChildren
[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] invokeGuardedCallback
[14] invokeGuardedCallbackImpl$1
[15] dispatchEvent
[16] func=commitBeforeMutationEffects
[13] invokeGuardedCallback
[14] invokeGuardedCallbackImpl$1
[15] dispatchEvent
[16] func=commitMutationEffects
[17] commitWork
[18] commitUpdate
[19] updateFiberProps {children: 1}
[19] updateProperties
[20] updateDOMProperties
[21] setTextContent
[22] (firstChild {#text}.nodeValue {'0'} = text {'3'}) [udpate dom]
[13] (root {tag: 0} .current {tag: 3} = finishedWork {tag: 3})
[13] invokeGuardedCallback
[14] invokeGuardedCallbackImpl
[15] dispatchEvent
[16] func=commitLayoutEffects
[17] commitLifeCycles
[13] flushSyncCallbackQueue
[14] flushSyncCallbackQueueImpl
[13] markCommitStopped [commit end]
[7] ensureRootIsScheduled
[2] finishEventHandler
[1] user click [end]