回答編集履歴
3
破壊的・非破壊的ハンドラーの処理がコピペのまま同じになっていたため修正
test
CHANGED
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
|
|
31
31
|
// ① 破壊的変更を行うハンドラー
|
|
32
32
|
const destroyableUpdate = () => {
|
|
33
|
-
|
|
33
|
+
person.age = 26;
|
|
34
|
-
setPerson(
|
|
34
|
+
setPerson(person);
|
|
35
35
|
};
|
|
36
36
|
|
|
37
37
|
// ② 非破壊的変更を行うハンドラー
|
2
微調整
test
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
## reactにおける破壊的・非破壊的について
|
|
24
24
|
|
|
25
25
|
上記を念頭に質問者さんのコードを元に破壊的・非破壊的変更の例を確認します。
|
|
26
|
+
余談ですがreactでこの問題について、意味は少し異なりますがミュータブル(可変)・イミュータブル(不変)という単語が使われることが多いです。
|
|
26
27
|
|
|
27
28
|
```js
|
|
28
29
|
const [person, setPerson] = useState({ name: 'Alice', age: 25 });
|
|
@@ -72,5 +73,5 @@
|
|
|
72
73
|
|
|
73
74
|
この意図せず再描画される・されないケースを防ぐために、[immutable.js](https://immutable-js.com/)や[immer](https://immerjs.github.io/immer/)と呼ばれるライブラリが利用されることがあります。
|
|
74
75
|
|
|
75
|
-
恐らく、質問者さんの受けた指摘？は正確には「オブジェクトの参照が変わらない方法でstateを更新しているため、意図しない再描画が行われる
|
|
76
|
+
恐らく、質問者さんの受けた指摘？は正確には「オブジェクトの参照が変わらない方法でstateを更新しているため、意図しない再描画が行われる可能性があります」ではないでしょうか？
|
|
76
77
|
|
1
微調整
test
CHANGED
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
```js
|
|
28
28
|
const [person, setPerson] = useState({ name: 'Alice', age: 25 });
|
|
29
29
|
|
|
30
|
-
//
|
|
30
|
+
// ① 破壊的変更を行うハンドラー
|
|
31
31
|
const destroyableUpdate = () => {
|
|
32
32
|
const newPerson = { name: 'Alice', age: 26 };
|
|
33
33
|
setPerson({ ...person, ...newPerson });
|
|
34
34
|
};
|
|
35
35
|
|
|
36
|
-
//
|
|
36
|
+
// ② 非破壊的変更を行うハンドラー
|
|
37
37
|
const undestroyableUpdate = () => {
|
|
38
38
|
const newPerson = { name: 'Alice', age: 26 };
|
|
39
39
|
setPerson({ ...person, ...newPerson });
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
);
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
① 破壊的変更を行うハンドラー
|
|
52
52
|
この関数ではオブジェクトのプロパティを直接変更しています。
|
|
53
53
|
(オブジェクトAのプロパティを変更しても参照はAのまま)
|
|
54
54
|
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
(AとAは同じ参照のため、reactが差分がないと判断して再描画しない)
|
|
57
57
|
この時のstateをshallow copyされたオブジェクトと呼びます。
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
② 非破壊的変更を行うハンドラー
|
|
60
60
|
この関数では新たにオブジェクトを作成して、そのオブジェクトの値を変更しています。
|
|
61
61
|
(オブジェクトBを作成して、オブジェクトAの値をコピー&値を上書き)
|
|
62
62
|
この時のstateをdeep copyされたオブジェクトと呼びます。
|