@@ -28,7 +28,7 @@ permalink: docs/conte {#legacy-api}xt.html
28
28
29
29
` embed:context/motivation-problem.js `
30
30
31
- コンテクストを使用することで、間のエレメントを通してプロパティを渡すことを避けることができます 。
31
+ コンテクストを使用することで、中間の要素を通してプロパティを渡すことを避けることができます 。
32
32
33
33
` embed:context/motivation-solution.js `
34
34
@@ -52,10 +52,9 @@ permalink: docs/conte {#legacy-api}xt.html
52
52
< / Link>
53
53
```
54
54
55
- 最終的に ` Avatar ` コンポーネントだけがプロパティを必要としているのであれば、多くの階層を通して ` user ` と ` avatarSize ` プロパティを下に渡すことは冗長に感じるかもしれません。
56
- また、` Avatar ` コンポーネントが上のコンポーネントから追加のプロパティを必要とする時はいつでも、全ての間の階層にも追加しないといけないことも厄介です。
55
+ 最終的に ` Avatar ` コンポーネントだけがプロパティを必要としているのであれば、多くの階層を通して ` user ` と ` avatarSize ` プロパティを下に渡すことは冗長に感じるかもしれません。また、` Avatar ` コンポーネントが上のコンポーネントから追加のプロパティを必要とする時はいつでも、全ての間の階層にも追加しないといけないことも厄介です。
57
56
58
- ** コンテクストを使用せずに** この問題を解決する 1 つの手法は、[ ` Avatar ` コンポーネント自身を渡す] ( /docs/composition-vs-inheritance.html#子要素の出力- containment ) ようにする方法で、間のコンポーネントは ` user ` プロパティを知る必要はありません。
57
+ ** コンテクストを使用せずに** この問題を解決する 1 つの手法は、[ ` Avatar ` コンポーネント自身を渡す] ( /docs/composition-vs-inheritance.html#containment ) ようにする方法で、間のコンポーネントは ` user ` プロパティを知る必要はありません。
59
58
60
59
``` js
61
60
function Page (props ) {
@@ -80,9 +79,9 @@ function Page(props) {
80
79
81
80
この変更により、一番上の Page コンポーネントだけが、` Link ` と ` Avatar ` コンポーネントの ` user ` と ` avatarSize ` の使い道について知る必要があります。
82
81
83
- この* 制御の反転* はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層がより複雑になると、それら高い階層のコンポーネントはより複雑化し、低い階層のコンポーネントは望む以上に柔軟になります 。
82
+ この* 制御の反転* はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します 。
84
83
85
- コンポーネントに対して、1 つの子までとは制限されていません。複数の子を渡したり、子の為に複数の別々の”slot”を持つことさえできます。[ ドキュメントはここにあります。] ( /docs/composition-vs-inheritance.html#子要素の出力- containment )
84
+ コンポーネントに対して、1 つの子までとは制限されていません。複数の子を渡したり、子の為に複数の別々の”slot”を持つことさえできます。[ ドキュメントはここにあります。] ( /docs/composition-vs-inheritance.html#containment )
86
85
87
86
``` js
88
87
function Page (props ) {
@@ -106,7 +105,7 @@ function Page(props) {
106
105
107
106
このパターンは、そのすぐ上の親から子を切り離す必要がある多くのケースにとって十分です。レンダリングの前に子が親とやり取りする必要がある場合、さらに[ レンダープロップ] ( /docs/render-props.html ) と合わせて使うことができます。
108
107
109
- しかし、たまに同じデータが異なるネスト階層でツリー内の多くのコンポーネントからアクセスが必要になります 。コンテクストはそのようなデータとその変更を以下の全てのコンポーネントへ”ブロードキャスト”できます。コンテクストが使用される一般的な例としては、現在のロケール、テーマ、またはデータキャッシュの管理を含む他の案よりシンプルになるかもしれない場合です。
108
+ しかし、たまに同じデータがツリー内の異なるネスト階層にある多くのコンポーネントからアクセス可能であることが必要となります 。コンテクストはそのようなデータとその変更を以下の全てのコンポーネントへ”ブロードキャスト”できます。コンテクストが使用される一般的な例としては、現在のロケール、テーマ、またはデータキャッシュの管理を含む他の案よりシンプルになるかもしれない場合です
110
109
111
110
## API {#api}
112
111
@@ -116,21 +115,21 @@ function Page(props) {
116
115
const MyContext = React .createContext (defaultValue);
117
116
```
118
117
119
- コンテクストオブジェクトを作成します。React がこのコンテクストオブジェクトが登録されているコンポーネントをレンダーする場合、ツリー内の最も近い上位の一致する ` プロバイダ ` から現在のコンテクストの値を読み取ります。
118
+ コンテクストオブジェクトを作成します。React がこのコンテクストオブジェクトが登録されているコンポーネントをレンダーする場合、ツリー内の最も近い上位の一致する ` Provider ` から現在のコンテクストの値を読み取ります。
120
119
121
- ` defaultValue ` 引数は、コンポーネントがツリー内の上位のプロバイダと一致しない場合のみ使用されます 。これは、ラップしない単独でのコンポーネントのテストにて役に立ちます。補足: ` undefined ` をプロバイダの値として渡しても、コンシューマコンポーネントが ` defaultValue ` を使用することはありません。
120
+ ` defaultValue ` 引数は、コンポーネントがツリー内の上位に一致するプロバイダを持っていない場合のみ使用されます 。これは、ラップしない単独でのコンポーネントのテストにて役に立ちます。補足: ` undefined ` をプロバイダの値として渡しても、コンシューマコンポーネントが ` defaultValue ` を使用することはありません。
122
121
123
122
### ` Context.Provider ` {#contextprovider}
124
123
125
124
``` js
126
- < MyContext .Provider value= {/* いくつかの値 */ }>
125
+ < MyContext .Provider value= {/* 何らかの値 */ }>
127
126
```
128
127
129
- 全てのコンテクストオブジェクトには、コンシューマコンポーネントがコンテクストの変更を登録することが可能なプロバイダ React コンポーネントが提供されます 。
128
+ 全てのコンテクストオブジェクトは、コンシューマコンポーネントにコンテクストの変更に対する購読を可能にするプロバイダ React コンポーネントとともに提供されます 。
130
129
131
- このプロバイダの子孫のコンシューマコンポーネントは、渡された ` value ` プロパティを受け取ります。1 つのプロバイダは多くのコンシューマと接続することが出来ます。プロバイダはツリー内でネストでき、より深い値で上書きすることが出来ます 。
130
+ このプロバイダの子孫のコンシューマコンポーネントは、渡された ` value ` プロパティを受け取ります。1 つのプロバイダは多くのコンシューマと接続することが出来ます。プロバイダは値を上書きするために、ツリー内のより深い位置でネストできます 。
132
131
133
- プロバイダの子孫の全てのコンシューマは、プロバイダの値プロパティが変更されるたびに再レンダーされます。プロバイダからその子孫コンシューマへの伝播は ` shouldComponentUpdate ` メソッドの影響を受けないため、コンシューマは親のコンポーネントが更新から開放されても更新されます 。
132
+ プロバイダの子孫の全てのコンシューマは、プロバイダの値プロパティが変更されるたびに再レンダーされます。プロバイダからその子孫コンシューマへの伝播は ` shouldComponentUpdate ` メソッドの影響を受けないため、コンシューマは祖先のコンポーネントで更新処理が止められた場合でも更新されます 。
134
133
135
134
変更は、[ ` Object.is ` ] ( //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description ) と同じアルゴリズムを使用し、新しい値と古い値の比較によって判断されます。
136
135
@@ -188,7 +187,7 @@ class MyClass extends React.Component {
188
187
< / MyContext .Consumer >
189
188
```
190
189
191
- コンテクストの変更を登録する React コンポーネントです。[ 関数コンポーネント] ( /docs/components-and-props.html#function-and-class-components ) 内のコンテクストを登録することができます 。
190
+ コンテクストの変更を購読する React コンポーネントです。[ 関数コンポーネント] ( /docs/components-and-props.html#function-and-class-components ) 内でコンテクストを購読することができます 。
192
191
193
192
[ function as a child] ( /docs/render-props.html#using-props-other-than-render ) が必要です。この関数は現在のコンテクストの値を受け取り、React ノードを返します。この関数に渡される引数 ` value ` は、このコンテクストのツリー内の上位の一番近いプロバイダの ` value ` プロパティと等しくなります。このコンテクスト用のプロバイダが上位に存在しない場合、引数の ` value ` は ` createContext() ` から渡された ` defaultValue ` と等しくなります。
194
193
@@ -234,7 +233,7 @@ class MyClass extends React.Component {
234
233
235
234
## 注意事項 {#caveats}
236
235
237
- コンテキストは参照 ID を使用していつ再レンダーするかを決定するため 、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に ` value ` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします。
236
+ コンテクストは参照が同一であるかどうかを使用していつ再レンダーするかを決定するため 、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に ` value ` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします。
238
237
239
238
` embed:context/reference-caveats-problem.js `
240
239
0 commit comments