@@ -12,7 +12,7 @@ React を使う際、`render()` 関数をある時点の React 要素のツリ
1212
1313あるツリーを別のものに変換するための最小限の操作を求めるというアルゴリズム問題については、いくつかの一般的な解決方法が存在しています。しかし、[ 最新のアルゴリズム] ( http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf ) でもツリーの要素数を n として O(n<sup >3</sup >) ほどの計算量があります。
1414
15- React でそのアルゴリズムを使った場合、1000 個の要素を表示するのに10億といったレベルの比較が必要となります 。これではあまりに計算コストが高すぎます。代わりに、React は 2 つの仮定に基づくことで、ある程度近い結果を得ることができる O(n) ほどの計算量のアルゴリズムを実装しています。
15+ React でそのアルゴリズムを使った場合、1000 個の要素を表示するのに 10 億といったレベルの比較が必要となります 。これではあまりに計算コストが高すぎます。代わりに、React は 2 つの仮定に基づくことで、ある程度近い結果を得ることができる O(n) ほどの計算量のアルゴリズムを実装しています。
1616
17171 . 異なる型の 2 つの要素は異なるツリーを生成する。
18182 . 開発者は key プロパティを与えることで、異なるレンダー間でどの子要素が変化しない可能性があるのかについてヒントを出すことができる。
@@ -45,15 +45,15 @@ React でそのアルゴリズムを使った場合、1000 個の要素を表示
4545
4646### 同じ型の DOM 要素 {#dom-elements-of-the-same-type}
4747
48- 同じ型の 2 つの React DOM 要素を比較した場合、React はそれぞれの属性を調べ、対応する共通の DOM ノードを保持し、変更された属性のみを更新します。例えば:
48+ 同じ型の 2 つの React DOM 要素を比較した場合、React はそれぞれの属性を調べ、対応する共通の DOM ノードを保持し、変更された属性のみを更新します。例えば:
4949
5050``` xml
5151<div className =" before" title =" stuff" />
5252
5353<div className =" after" title =" stuff" />
5454```
5555
56- これらの2つの要素を比べた場合 、React は対応する DOM ノードの ` className ` のみを更新すればよいと分かります。
56+ これらの 2 つの要素を比べた場合 、React は対応する DOM ノードの ` className ` のみを更新すればよいと分かります。
5757
5858` style ` を更新した場合は、React は同様に変更されたプロパティのみを更新すればよいと分かります。例えば:
5959
@@ -128,7 +128,7 @@ React は `<li>Duke</li>` と `<li>Villanova</li>` サブツリーをそのま
128128</ul >
129129```
130130
131- これで React は、` '2014' ` の keyを持つ要素が新規の要素であり、 ` '2015' ` と ` '2016' ` の keyをもつ要素は移動しただけだ 、と理解するようになります。
131+ これで React は、` '2014' ` の key を持つ要素が新規の要素であり、 ` '2015' ` と ` '2016' ` の key をもつ要素は移動しただけだ 、と理解するようになります。
132132
133133実際に、key を探すのはたいてい難しくありません。表示しようとしている要素は既に固有の ID を持っているかもしれないので、key をそのデータから設定するだけです。
134134
@@ -142,7 +142,7 @@ React は `<li>Duke</li>` と `<li>Villanova</li>` サブツリーをそのま
142142
143143key として配列のインデックスが使用されている場合、並べ替えはコンポーネントの状態に関しても問題を起こすことがあります。コンポーネントのインスタンスは key に基づいて更新、再利用されます。インデックスが key の場合、要素の移動はインデックスの変更を伴います。結果として、非制御の入力などに対するコンポーネントの状態が混乱し、予期せぬ形で更新されてしまうことがあります。
144144
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 ) が同じ例の更新版であり、配列のインデックスを使わないことで、ソートや並び替え、要素の先頭への追加にまつわる問題がどのように解決されるのかを示しています。
146146
147147## トレードオフ {#tradeoffs}
148148
0 commit comments