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: docs/docs/09.6-update.md
+47-9Lines changed: 47 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,22 +14,23 @@ Dealing with immutable data in JavaScript is more difficult than in languages de
14
14
15
15
If you mutate data like this:
16
16
17
-
```javascript
17
+
```js
18
18
myData.x.y.z=7;
19
+
// or...
19
20
myData.a.b.push(9);
20
21
```
21
22
22
-
you have no way of determining which data has changed since the previous copy is destroyed. Instead, you need to create a new copy of `myData` and change only the parts of it that need to be changed. Then you can compare the old copy of `myData` with the new one in `shouldComponentUpdate()` using triple-equals:
23
+
you have no way of determining which data has changed since the previous copy is overriden. Instead, you need to create a new copy of `myData` and change only the parts of it that need to be changed. Then you can compare the old copy of `myData` with the new one in `shouldComponentUpdate()` using triple-equals:
23
24
24
-
```javascript
25
+
```js
25
26
var newData =deepCopy(myData);
26
27
newData.x.y.z=7;
27
28
newData.a.b.push(9);
28
29
```
29
30
30
31
Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven't changed. Unfortunately, in today's JavaScript this can be cumbersome:
31
32
32
-
```javascript
33
+
```js
33
34
var newData =extend(myData, {
34
35
x:extend(myData.x, {
35
36
y:extend(myData.x.y, {z:7}),
@@ -42,7 +43,7 @@ While this is fairly performant (since it only shallow copies `log n` objects an
42
43
43
44
`update()` provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:
44
45
45
-
```javascript
46
+
```js
46
47
var newData =React.addons.update(myData, {
47
48
x: {y: {z: {$set:7}}},
48
49
a: {b: {$push: [9]}}
@@ -55,8 +56,45 @@ The `$`-prefixed keys are called *commands*. The data structure they are "mutati
55
56
56
57
## Available commands
57
58
58
-
*`{$push: array}``push()` all the items in `array` on the target
59
-
*`{$unshift: array}``unshift()` all the items in `array` on the target
59
+
*`{$push: array}``push()` all the items in `array` on the target.
60
+
*`{$unshift: array}``unshift()` all the items in `array` on the target.
60
61
*`{$splice: array of arrays}` for each item in `array()` call `splice()` on the target with the parameters provided by the item.
61
-
*`{$set: any}` replace the target entirely
62
-
*`{$merge: object}` merge the keys of `object` with the target
62
+
*`{$set: any}` replace the target entirely.
63
+
*`{$merge: object}` merge the keys of `object` with the target.
64
+
*`{$apply: function}` passes in the current value to the function and updates it with the new returned value.
0 commit comments