Skip to content

Commit 2670532

Browse files
koba04smikitky
andauthored
Apply suggestions from code review
Co-Authored-By: smikitky <[email protected]>
1 parent d7c7530 commit 2670532

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

content/docs/hooks-effect.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function Example() {
3535

3636
このスニペットは [1 つ前のページのカウンターの例](/docs/hooks-state.html)に基づいていますが、新しい機能をひとつ加えてあります。クリック回数を含んだカスタムのメッセージをドキュメントのタイトルにセットしているのです。
3737

38-
データの取得、購読の設定、あるいは React コンポーネント内の DOM の手動での変更、といったものはすべて副作用の例です。これらを "副作用 (side-effect)"(あるいは単に "作用 (effect)")と呼ぶことに慣れているかどうかはともかくとしても、これらのようなことをコンポーネントに対して行ったことはあるでしょう
38+
データの取得、購読の設定、あるいは React コンポーネント内の DOM の手動での変更、といったものはすべて副作用の例です。これらを "副作用 (side-effect)"(あるいは単に "作用 (effect)")と呼ぶことに慣れているかどうかはともかくとしても、これらのようなことをコンポーネントの中で行ったことはあるでしょう
3939

4040
> ヒント
4141
>
@@ -143,7 +143,7 @@ function Example() {
143143
144144
## クリーンアップを有する副作用
145145
146-
ここまでに、クリーンアップを必要としない副作用の表現のしかたについて見てきました。しかし幾つかの副作用ではそれが必要です。例えば何らかの外部のデータソースへの**購読をセットアップしたい**ことがあります。そのような場合、メモリーリークが発生しないようにクリーンアップが必要です! クラスの場合とフックの場合とでクリーンアップをどのように行えるのか比較しましょう。
146+
ここまでに、クリーンアップを必要としない副作用の表現のしかたについて見てきました。しかし幾つかの副作用ではそれが必要です。例えば何らかの外部のデータソースへの**購読をセットアップしたい**ことがあります。そのような場合、メモリリークが発生しないようにクリーンアップが必要です! クラスの場合とフックの場合とでクリーンアップをどのように行えるのか比較しましょう。
147147
148148
### クラスを使った例
149149
@@ -266,7 +266,7 @@ function FriendStatus(props) {
266266
267267
### ヒント:関心を分離するために複数の副作用を使う
268268
269-
フックを[導入する動機](/docs/hooks-intro.html#complex-components-become-hard-to-understand)のページで述べた問題のひとつは、しばしばライフサイクルメソッドには無関係なロジックが含まれ、一方で関連するロジックが複数のメソッドに分割されてしまう、ということです。以下に示すのは、これまでの例で挙げたカウンタとフレンド状態インジケータとを組み合わせたコンポーネントです。
269+
フックを[導入する動機](/docs/hooks-intro.html#complex-components-become-hard-to-understand)のページで述べた問題のひとつは、しばしばそれぞれのライフサイクルメソッドに関連のないロジックが含まれ、一方で関連するロジックが複数のメソッドに分割されてしまう、ということです。以下に示すのは、これまでの例で挙げたカウンタとフレンド状態インジケータとを組み合わせたコンポーネントです。
270270
271271
```js
272272
class FriendStatusWithCounter extends React.Component {
@@ -403,7 +403,7 @@ function FriendStatus(props) {
403403
404404
動作は変わっておらず、前述のバグも起こらなくなります。
405405
406-
`useEffect` は*デフォルトで*更新を処理するため、更新のための特別なコードは不要です。新しい副作用を適用する前に、ひとつ前の副作用をクリーンアップします。これを例示するため、このコンポーネントが発生させる可能性のある購読登録と購読解除のシーケンスをお示しします
406+
`useEffect` は*デフォルトで*更新を処理するため、更新のための特別なコードは不要です。新しい副作用を適用する前に、ひとつ前の副作用をクリーンアップします。これを例示するため、このコンポーネントが経時的に発生させる可能性のある購読登録と購読解除のシーケンスを示しします
407407
408408
```js
409409
// Mount with { friend: { id: 100 } } props

0 commit comments

Comments
 (0)