Skip to content

Commit aed3392

Browse files
committed
Fix textlint errors in reconciliation
1 parent 09a86b5 commit aed3392

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

content/docs/reconciliation.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -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

1717
1. 異なる型の 2 つの要素は異なるツリーを生成する。
1818
2. 開発者は 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

143143
key として配列のインデックスが使用されている場合、並べ替えはコンポーネントの状態に関しても問題を起こすことがあります。コンポーネントのインスタンスは 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

Comments
 (0)