1
1
---
2
2
id : context
3
3
title : コンテクスト
4
- permalink : docs/conte {#legacy-api}xt .html
4
+ permalink : docs/context .html
5
5
---
6
6
7
7
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーを通してデータを渡す方法を提供します。
@@ -24,7 +24,7 @@ permalink: docs/conte {#legacy-api}xt.html
24
24
25
25
## コンテクストをいつ使用すべきか {#when-to-use-context}
26
26
27
- コンテクストは、現在の認証済みユーザー、テーマ、優先言語などの React コンポーネントのツリーに対して” グローバル”とみなすことができるデータを共有するように設計されています 。例えば、以下のコードでは Button コンポーネントをスタイルする為に、手動で” theme” プロパティを通しています。
27
+ コンテクストは、ある React コンポーネントのツリーに対して「 グローバル」とみなすことができる、現在の認証済みユーザー・テーマ・優先言語といったデータを共有するために設計されています 。例えば、以下のコードでは Button コンポーネントをスタイルする為に、手動で " theme" プロパティを通しています。
28
28
29
29
` embed:context/motivation-problem.js `
30
30
@@ -36,7 +36,7 @@ permalink: docs/conte {#legacy-api}xt.html
36
36
37
37
コンテクストは主に、いくつかのデータがネストしている階層が違う* 多く* のコンポーネントからアクセスが必要な時に使用されます。コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用してください。
38
38
39
- ** もし多くの階層を通していくつかのプロパティを渡すことを避けたいだけであれば、[ コンポーネント コンポジション] ( /docs/composition-vs-inheritance.html ) は多くの場合、コンテクストよりシンプルな解決策です。**
39
+ ** もし多くの階層を通していくつかのプロパティを渡すことを避けたいだけであれば、[ コンポーネント コンポジション] ( /docs/composition-vs-inheritance.html ) は多くの場合、コンテクストよりシンプルな解決策です。**
40
40
41
41
例えば、深くネストされた ` Link ` と ` Avatar ` コンポーネントがプロパティを読み取ることが出来るように、` user ` と ` avatarSize ` プロパティをいくつかの階層下へ渡す ` Page ` コンポーネントを考えてみましょう。
42
42
@@ -54,7 +54,7 @@ permalink: docs/conte {#legacy-api}xt.html
54
54
55
55
最終的に ` Avatar ` コンポーネントだけがプロパティを必要としているのであれば、多くの階層を通して ` user ` と ` avatarSize ` プロパティを下に渡すことは冗長に感じるかもしれません。また、` Avatar ` コンポーネントが上のコンポーネントから追加のプロパティを必要とする時はいつでも、全ての間の階層にも追加しないといけないことも厄介です。
56
56
57
- ** コンテクストを使用せずに** この問題を解決する 1 つの手法は、[ ` Avatar ` コンポーネント自身を渡す] ( /docs/composition-vs-inheritance.html#containment ) ようにする方法で、間のコンポーネントは ` user ` プロパティを知る必要はありません。
57
+ ** コンテクストを使用せずに** この問題を解決する 1 つの手法は、[ ` Avatar ` コンポーネント自身を渡す] ( /docs/composition-vs-inheritance.html#containment ) ようにするというもので、そうすれば間のコンポーネントは ` user ` プロパティを知る必要はありません。
58
58
59
59
``` js
60
60
function Page (props ) {
@@ -67,7 +67,7 @@ function Page(props) {
67
67
return < PageLayout userLink= {userLink} / > ;
68
68
}
69
69
70
- // 今であれば、以下のようになります 。
70
+ // これで以下のようになります 。
71
71
< Page user= {user} / >
72
72
// ... Page コンポーネントは以下をレンダー ...
73
73
< PageLayout userLink= {... } / >
@@ -81,7 +81,7 @@ function Page(props) {
81
81
82
82
この* 制御の反転* はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。
83
83
84
- コンポーネントに対して、1 つの子までとは制限されていません 。複数の子を渡したり、子の為に複数の別々の”slot” を持つことさえできます。[ ドキュメントはここにあります。] ( /docs/composition-vs-inheritance.html#containment )
84
+ コンポーネントに対して 1 つの子までという制限はありません 。複数の子を渡したり、子のために複数の別々の「スロット」 を持つことさえできます。[ ドキュメントはここにあります。] ( /docs/composition-vs-inheritance.html#containment )
85
85
86
86
``` js
87
87
function Page (props ) {
@@ -105,7 +105,7 @@ function Page(props) {
105
105
106
106
このパターンは、そのすぐ上の親から子を切り離す必要がある多くのケースにとって十分です。レンダリングの前に子が親とやり取りする必要がある場合、さらに[ レンダープロップ] ( /docs/render-props.html ) と合わせて使うことができます。
107
107
108
- しかし、たまに同じデータがツリー内の異なるネスト階層にある多くのコンポーネントからアクセス可能であることが必要となります。コンテクストはそのようなデータとその変更を以下の全てのコンポーネントへ” ブロードキャスト” できます。コンテクストが使用される一般的な例としては 、現在のロケール、テーマ、またはデータキャッシュの管理を含む他の案よりシンプルになるかもしれない場合です
108
+ しかし、たまに同じデータがツリー内の異なるネスト階層にある多くのコンポーネントからアクセス可能であることが必要となります。コンテクストはそのようなデータとその変更を以下の全てのコンポーネントへ「 ブロードキャスト」 できます。コンテクストを使うことが他の手法よりシンプルである一般的な例としては 、現在のロケール、テーマ、またはデータキャッシュの管理が挙げられます。
109
109
110
110
## API {#api}
111
111
@@ -125,17 +125,17 @@ const MyContext = React.createContext(defaultValue);
125
125
< MyContext .Provider value= {/* 何らかの値 */ }>
126
126
```
127
127
128
- 全てのコンテクストオブジェクトは、コンシューマコンポーネントにコンテクストの変更に対する購読を可能にするプロバイダ React コンポーネントとともに提供されます 。
128
+ 全てのコンテクストオブジェクトにはプロバイダ (Provider) コンポーネントが付属しており、これによりコンシューマコンポーネントはコンテクストの変更を購読できます 。
129
129
130
- このプロバイダの子孫のコンシューマコンポーネントは、渡された ` value ` プロパティを受け取ります 。1 つのプロバイダは多くのコンシューマと接続することが出来ます。プロバイダは値を上書きするために、ツリー内のより深い位置でネストできます。
130
+ プロバイダは ` value ` プロパティを受け取り、これが子孫であるコンシューマコンポーネントに渡されます 。1 つのプロバイダは多くのコンシューマと接続することが出来ます。プロバイダは値を上書きするために、ツリー内のより深い位置でネストできます。
131
131
132
- プロバイダの子孫の全てのコンシューマは、プロバイダの値プロパティが変更されるたびに再レンダーされます 。プロバイダからその子孫コンシューマへの伝播は ` shouldComponentUpdate ` メソッドの影響を受けないため、コンシューマは祖先のコンポーネントで更新処理が止められた場合でも更新されます。
132
+ プロバイダの子孫の全てのコンシューマは、プロバイダの ` value ` プロパティが変更されるたびに再レンダーされます 。プロバイダからその子孫コンシューマへの伝播は ` shouldComponentUpdate ` メソッドの影響を受けないため、コンシューマは祖先のコンポーネントで更新処理が止められた場合でも更新されます。
133
133
134
134
変更は、[ ` Object.is ` ] ( //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description ) と同じアルゴリズムを使用し、新しい値と古い値の比較によって判断されます。
135
135
136
136
> 補足
137
137
>
138
- > 変更が判断される方法は 、オブジェクトを ` value ` として渡される場合に、いくつかの問題が発生する可能性があります。:詳細 [ 注意事項] ( #注意事項 )
138
+ > この方法で変更の有無を判断するため 、オブジェクトを ` value ` として渡した場合にいくつかの問題が発生する可能性があります。詳細は [ 注意事項] ( #caveats ) を参照。
139
139
140
140
### ` Class.contextType ` {#classcontexttype}
141
141
@@ -161,11 +161,11 @@ class MyClass extends React.Component {
161
161
MyClass .contextType = MyContext;
162
162
```
163
163
164
- クラスの ` contextType ` プロパティは [ ` React.createContext() ` ] ( #reactcreatecontext ) により作成されたコンテキストオブジェクトを指定することが出来ます。 ` this.context ` を使用して、そのコンテクストタイプに最も近い現在の値を使用することを可能にします 。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。
164
+ クラスの ` contextType ` プロパティには [ ` React.createContext() ` ] ( #reactcreatecontext ) により作成されたコンテキストオブジェクトを指定することができます。これにより、 ` this.context ` を使って、そのコンテクストタイプの最も近い現在値を利用できます 。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。
165
165
166
166
> 補足:
167
167
>
168
- > この API では、1 つのコンテクストだけ登録することができます。もし 1 つ以上を読み取る必要がある場合、[ 複数のコンテクストを使用する] ( #複数のコンテクストを使用する ) を見てください 。
168
+ > この API では、1 つのコンテクストだけ登録することができます。もし 2 つ以上を読み取る必要がある場合、[ 複数のコンテクストを使用する] ( #consuming-multiple-contexts ) を参照してください 。
169
169
>
170
170
> 実験的な [ public class fields syntax] ( https://babeljs.io/docs/plugins/transform-class-properties/ ) を使用している場合、** static** クラスフィールドを使用することで ` contextType ` を初期化することができます。
171
171
@@ -193,7 +193,7 @@ class MyClass extends React.Component {
193
193
194
194
> 補足
195
195
>
196
- > ” function as a child” パターンについてさらに情報が必要な場合は [ レンダープロップ] ( /docs/render-props.html ) を参照してください。
196
+ > " function as a child" パターンについてさらに情報が必要な場合は [ レンダープロップ] ( /docs/render-props.html ) を参照してください。
197
197
198
198
## 例 {#examples}
199
199
@@ -233,11 +233,11 @@ class MyClass extends React.Component {
233
233
234
234
## 注意事項 {#caveats}
235
235
236
- コンテクストは参照が同一であるかどうかを使用していつ再レンダーするかを決定するため 、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に ` value ` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします 。
236
+ コンテクストは参照の同一性を使用していつ再レンダーするかを決定するため 、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば以下のコードでは、新しいオブジェクトが ` value ` に対して常に作成されるため、プロバイダが再レンダーするたびにすべてのコンシューマを再レンダーしてしまいます 。
237
237
238
238
` embed:context/reference-caveats-problem.js `
239
239
240
- この問題を回避するためには、親の state に値を上げます 。
240
+ この問題を回避するためには、親の state に値をリフトアップします 。
241
241
242
242
` embed:context/reference-caveats-solution.js `
243
243
0 commit comments