You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 04-how-setstate-works-part-2.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,31 +23,31 @@ Here we just call `this.setState()` with new value. Let's search `setState` and
23
23
24
24
Scroll down a little bit, you can see this.
25
25
26
-
26
+
27
27
28
28
Double click it.
29
29
30
-
30
+
31
31
32
32
What's the `updater`?
33
33
34
-
34
+
35
35
36
36
It's a parameter of `ReactComponent()`, injected by other classes. We don't know where it's injected(because we don't have an injection method here for searching), but we can search `enqueueSetState` to see who has that method. There is a `SetState` in that method name, so seems it's not a generic method, maybe only used in `setState()`.
37
37
38
-
38
+
39
39
40
40
Six matches, first is the calling, second is an abstract definition, next three are real definitions of server render, fiber, and stack. Recall that fiber is the new generation, so we go into the last one.
41
41
42
-
42
+
43
43
44
44
It pushes partial state(the parameter of `setState()`) into the `_pendingStateQueue` and calls `enqueueUpdate(internalInstance)`.
45
45
46
-
46
+
47
47
48
48
Open `ReactUpdates.js` and search `enqueueUpdate`.
49
49
50
-
50
+
51
51
52
52
These two `if` clauses are more complicated than you think.
53
53
@@ -57,7 +57,7 @@ Let's simulate the execution with different `batchingStrategy.isBatchingUpdates`
57
57
58
58
Now the first `if` is true, so it calls `batchedUpdates()`. Let's read `batchedUpdates()`(Recall it's inside `ReactDefaultBatchingStrategy.js` and injected to `ReactUpdate`).
59
59
60
-
60
+
61
61
62
62
Here checks whether inside a batching update again. It's false, so we set it to `true`, then wraps and executes it with a transaction.
63
63
@@ -96,11 +96,11 @@ Recall that we are already inside a batching update now, so when we finish the m
96
96
97
97
A picture is worth a thousand words.
98
98
99
-
99
+
100
100
101
101
Above is the `render()` process with `setState()` in `componentDidMount()`.
102
102
103
-
103
+
104
104
105
105
Above is the normal `setState()` process. Normal means not inside some batching update.
0 commit comments