Skip to content

Commit 6b92538

Browse files
committed
refactor: apply suggestions from review
1 parent 7950a01 commit 6b92538

File tree

3 files changed

+16
-17
lines changed

3 files changed

+16
-17
lines changed

content/docs/context.md

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ permalink: docs/conte {#legacy-api}xt.html
2828

2929
`embed:context/motivation-problem.js`
3030

31-
コンテクストを使用することで、間のエレメントを通してプロパティを渡すことを避けることができます
31+
コンテクストを使用することで、中間の要素を通してプロパティを渡すことを避けることができます
3232

3333
`embed:context/motivation-solution.js`
3434

@@ -52,10 +52,9 @@ permalink: docs/conte {#legacy-api}xt.html
5252
</Link>
5353
```
5454

55-
最終的に `Avatar` コンポーネントだけがプロパティを必要としているのであれば、多くの階層を通して `user``avatarSize` プロパティを下に渡すことは冗長に感じるかもしれません。
56-
また、`Avatar` コンポーネントが上のコンポーネントから追加のプロパティを必要とする時はいつでも、全ての間の階層にも追加しないといけないことも厄介です。
55+
最終的に `Avatar` コンポーネントだけがプロパティを必要としているのであれば、多くの階層を通して `user``avatarSize` プロパティを下に渡すことは冗長に感じるかもしれません。また、`Avatar` コンポーネントが上のコンポーネントから追加のプロパティを必要とする時はいつでも、全ての間の階層にも追加しないといけないことも厄介です。
5756

58-
**コンテクストを使用せずに**この問題を解決する 1 つの手法は、[`Avatar` コンポーネント自身を渡す](/docs/composition-vs-inheritance.html#子要素の出力-containment) ようにする方法で、間のコンポーネントは `user` プロパティを知る必要はありません。
57+
**コンテクストを使用せずに**この問題を解決する 1 つの手法は、[`Avatar` コンポーネント自身を渡す](/docs/composition-vs-inheritance.html#containment) ようにする方法で、間のコンポーネントは `user` プロパティを知る必要はありません。
5958

6059
```js
6160
function Page(props) {
@@ -80,9 +79,9 @@ function Page(props) {
8079

8180
この変更により、一番上の Page コンポーネントだけが、`Link``Avatar` コンポーネントの `user``avatarSize` の使い道について知る必要があります。
8281

83-
この*制御の反転*はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層がより複雑になると、それら高い階層のコンポーネントはより複雑化し、低い階層のコンポーネントは望む以上に柔軟になります
82+
この*制御の反転*はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します
8483

85-
コンポーネントに対して、1 つの子までとは制限されていません。複数の子を渡したり、子の為に複数の別々の”slot”を持つことさえできます。[ドキュメントはここにあります。](/docs/composition-vs-inheritance.html#子要素の出力-containment)
84+
コンポーネントに対して、1 つの子までとは制限されていません。複数の子を渡したり、子の為に複数の別々の”slot”を持つことさえできます。[ドキュメントはここにあります。](/docs/composition-vs-inheritance.html#containment)
8685

8786
```js
8887
function Page(props) {
@@ -106,7 +105,7 @@ function Page(props) {
106105

107106
このパターンは、そのすぐ上の親から子を切り離す必要がある多くのケースにとって十分です。レンダリングの前に子が親とやり取りする必要がある場合、さらに[レンダープロップ](/docs/render-props.html)と合わせて使うことができます。
108107

109-
しかし、たまに同じデータが異なるネスト階層でツリー内の多くのコンポーネントからアクセスが必要になります。コンテクストはそのようなデータとその変更を以下の全てのコンポーネントへ”ブロードキャスト”できます。コンテクストが使用される一般的な例としては、現在のロケール、テーマ、またはデータキャッシュの管理を含む他の案よりシンプルになるかもしれない場合です
108+
しかし、たまに同じデータがツリー内の異なるネスト階層にある多くのコンポーネントからアクセス可能であることが必要となります。コンテクストはそのようなデータとその変更を以下の全てのコンポーネントへ”ブロードキャスト”できます。コンテクストが使用される一般的な例としては、現在のロケール、テーマ、またはデータキャッシュの管理を含む他の案よりシンプルになるかもしれない場合です
110109

111110
## API {#api}
112111

@@ -116,21 +115,21 @@ function Page(props) {
116115
const MyContext = React.createContext(defaultValue);
117116
```
118117

119-
コンテクストオブジェクトを作成します。React がこのコンテクストオブジェクトが登録されているコンポーネントをレンダーする場合、ツリー内の最も近い上位の一致する `プロバイダ` から現在のコンテクストの値を読み取ります。
118+
コンテクストオブジェクトを作成します。React がこのコンテクストオブジェクトが登録されているコンポーネントをレンダーする場合、ツリー内の最も近い上位の一致する `Provider` から現在のコンテクストの値を読み取ります。
120119

121-
`defaultValue` 引数は、コンポーネントがツリー内の上位のプロバイダと一致しない場合のみ使用されます。これは、ラップしない単独でのコンポーネントのテストにて役に立ちます。補足: `undefined` をプロバイダの値として渡しても、コンシューマコンポーネントが `defaultValue` を使用することはありません。
120+
`defaultValue` 引数は、コンポーネントがツリー内の上位に一致するプロバイダを持っていない場合のみ使用されます。これは、ラップしない単独でのコンポーネントのテストにて役に立ちます。補足: `undefined` をプロバイダの値として渡しても、コンシューマコンポーネントが `defaultValue` を使用することはありません。
122121

123122
### `Context.Provider` {#contextprovider}
124123

125124
```js
126-
<MyContext.Provider value={/* いくつかの値 */}>
125+
<MyContext.Provider value={/* 何らかの値 */}>
127126
```
128127

129-
全てのコンテクストオブジェクトには、コンシューマコンポーネントがコンテクストの変更を登録することが可能なプロバイダ React コンポーネントが提供されます
128+
全てのコンテクストオブジェクトは、コンシューマコンポーネントにコンテクストの変更に対する購読を可能にするプロバイダ React コンポーネントとともに提供されます
130129

131-
このプロバイダの子孫のコンシューマコンポーネントは、渡された `value` プロパティを受け取ります。1 つのプロバイダは多くのコンシューマと接続することが出来ます。プロバイダはツリー内でネストでき、より深い値で上書きすることが出来ます
130+
このプロバイダの子孫のコンシューマコンポーネントは、渡された `value` プロパティを受け取ります。1 つのプロバイダは多くのコンシューマと接続することが出来ます。プロバイダは値を上書きするために、ツリー内のより深い位置でネストできます
132131

133-
プロバイダの子孫の全てのコンシューマは、プロバイダの値プロパティが変更されるたびに再レンダーされます。プロバイダからその子孫コンシューマへの伝播は `shouldComponentUpdate` メソッドの影響を受けないため、コンシューマは親のコンポーネントが更新から開放されても更新されます
132+
プロバイダの子孫の全てのコンシューマは、プロバイダの値プロパティが変更されるたびに再レンダーされます。プロバイダからその子孫コンシューマへの伝播は `shouldComponentUpdate` メソッドの影響を受けないため、コンシューマは祖先のコンポーネントで更新処理が止められた場合でも更新されます
134133

135134
変更は、[`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) と同じアルゴリズムを使用し、新しい値と古い値の比較によって判断されます。
136135

@@ -188,7 +187,7 @@ class MyClass extends React.Component {
188187
</MyContext.Consumer>
189188
```
190189

191-
コンテクストの変更を登録する React コンポーネントです。[関数コンポーネント](/docs/components-and-props.html#function-and-class-components) 内のコンテクストを登録することができます
190+
コンテクストの変更を購読する React コンポーネントです。[関数コンポーネント](/docs/components-and-props.html#function-and-class-components) 内でコンテクストを購読することができます
192191

193192
[function as a child](/docs/render-props.html#using-props-other-than-render) が必要です。この関数は現在のコンテクストの値を受け取り、React ノードを返します。この関数に渡される引数 `value` は、このコンテクストのツリー内の上位の一番近いプロバイダの `value` プロパティと等しくなります。このコンテクスト用のプロバイダが上位に存在しない場合、引数の `value``createContext()` から渡された `defaultValue` と等しくなります。
194193

@@ -234,7 +233,7 @@ class MyClass extends React.Component {
234233

235234
## 注意事項 {#caveats}
236235

237-
コンテキストは参照 ID を使用していつ再レンダーするかを決定するため、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に `value` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします。
236+
コンテクストは参照が同一であるかどうかを使用していつ再レンダーするかを決定するため、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に `value` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします。
238237

239238
`embed:context/reference-caveats-problem.js`
240239

examples/context/multiple-contexts.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class App extends React.Component {
1010
render() {
1111
const {signedInUser, theme} = this.props;
1212

13-
// コンテクストの初期値を与える APP コンポーネント
13+
// コンテクストの初期値を与える App コンポーネント
1414
// highlight-range{2-3,5-6}
1515
return (
1616
<ThemeContext.Provider value={theme}>

examples/context/theme-detailed-app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {ThemeContext, themes} from './theme-context';
22
import ThemedButton from './themed-button';
33

4-
// ThemedButtonを使用する間のコンポーネント
4+
// ThemedButtonを使用する中間のコンポーネント
55
function Toolbar(props) {
66
return (
77
<ThemedButton onClick={props.changeTheme}>

0 commit comments

Comments
 (0)