@@ -12,7 +12,7 @@ React を使う際、`render()` 関数をある時点の React 要素のツリ
12
12
13
13
あるツリーを別のものに変換するための最小限の操作を求めるというアルゴリズム問題については、いくつかの一般的な解決方法が存在しています。しかし、[ 最新のアルゴリズム] ( http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf ) でもツリーの要素数を n として O(n<sup >3</sup >) ほどの計算量があります。
14
14
15
- React でそのアルゴリズムを使った場合、1000 個の要素を表示するのに10億といったレベルの比較が必要となります 。これではあまりに計算コストが高すぎます。代わりに、React は 2 つの仮定に基づくことで、ある程度近い結果を得ることができる O(n) ほどの計算量のアルゴリズムを実装しています。
15
+ React でそのアルゴリズムを使った場合、1000 個の要素を表示するのに 10 億といったレベルの比較が必要となります 。これではあまりに計算コストが高すぎます。代わりに、React は 2 つの仮定に基づくことで、ある程度近い結果を得ることができる O(n) ほどの計算量のアルゴリズムを実装しています。
16
16
17
17
1 . 異なる型の 2 つの要素は異なるツリーを生成する。
18
18
2 . 開発者は key プロパティを与えることで、異なるレンダー間でどの子要素が変化しない可能性があるのかについてヒントを出すことができる。
@@ -45,15 +45,15 @@ React でそのアルゴリズムを使った場合、1000 個の要素を表示
45
45
46
46
### 同じ型の DOM 要素 {#dom-elements-of-the-same-type}
47
47
48
- 同じ型の 2 つの React DOM 要素を比較した場合、React はそれぞれの属性を調べ、対応する共通の DOM ノードを保持し、変更された属性のみを更新します。例えば:
48
+ 同じ型の 2 つの React DOM 要素を比較した場合、React はそれぞれの属性を調べ、対応する共通の DOM ノードを保持し、変更された属性のみを更新します。例えば:
49
49
50
50
``` xml
51
51
<div className =" before" title =" stuff" />
52
52
53
53
<div className =" after" title =" stuff" />
54
54
```
55
55
56
- これらの2つの要素を比べた場合 、React は対応する DOM ノードの ` className ` のみを更新すればよいと分かります。
56
+ これらの 2 つの要素を比べた場合 、React は対応する DOM ノードの ` className ` のみを更新すればよいと分かります。
57
57
58
58
` style ` を更新した場合は、React は同様に変更されたプロパティのみを更新すればよいと分かります。例えば:
59
59
@@ -128,7 +128,7 @@ React は `<li>Duke</li>` と `<li>Villanova</li>` サブツリーをそのま
128
128
</ul >
129
129
```
130
130
131
- これで React は、` '2014' ` の keyを持つ要素が新規の要素であり、 ` '2015' ` と ` '2016' ` の keyをもつ要素は移動しただけだ 、と理解するようになります。
131
+ これで React は、` '2014' ` の key を持つ要素が新規の要素であり、 ` '2015' ` と ` '2016' ` の key をもつ要素は移動しただけだ 、と理解するようになります。
132
132
133
133
実際に、key を探すのはたいてい難しくありません。表示しようとしている要素は既に固有の ID を持っているかもしれないので、key をそのデータから設定するだけです。
134
134
@@ -142,7 +142,7 @@ React は `<li>Duke</li>` と `<li>Villanova</li>` サブツリーをそのま
142
142
143
143
key として配列のインデックスが使用されている場合、並べ替えはコンポーネントの状態に関しても問題を起こすことがあります。コンポーネントのインスタンスは key に基づいて更新、再利用されます。インデックスが key の場合、要素の移動はインデックスの変更を伴います。結果として、非制御の入力などに対するコンポーネントの状態が混乱し、予期せぬ形で更新されてしまうことがあります。
144
144
145
- [ CodePen] ( codepen://reconciliation/index-used-as-key ) に配列のインデックスを key として使うことで生じる問題についての例があります。また、[ こちら] ( codepen://reconciliation/no-index-used-as-key ) が同じ例の更新版であり、配列のインデックスを使わないことで、ソートや並び替え、要素の先頭への追加にまつわる問題がどのように解決されるのかを示しています。
145
+ [ CodePen] ( codepen://reconciliation/index-used-as-key ) に配列のインデックスを key として使うことで生じる問題についての例があります。また、[ こちら] ( codepen://reconciliation/no-index-used-as-key ) が同じ例の更新版であり、配列のインデックスを使わないことで、ソートや並び替え、要素の先頭への追加にまつわる問題がどのように解決されるのかを示しています。
146
146
147
147
## トレードオフ {#tradeoffs}
148
148
0 commit comments