diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 27559207c..3a4e80a57 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -35,7 +35,7 @@ function Example() { このスニペットは [1 つ前のページのカウンターの例](/docs/hooks-state.html)に基づいていますが、新しい機能をひとつ加えてあります。クリック回数を含んだカスタムのメッセージをドキュメントのタイトルにセットしているのです。 -データの取得、購読の設定、あるいは React コンポーネント内の DOM の手動での変更、といったものはすべて副作用の例です。これらを "副作用 (side-effect)"(あるいは単に "作用 (effect)")と呼ぶことに慣れているかどうかはともかくとしても、これらのようなことをコンポーネントに対して行ったことはあるでしょう。 +データの取得、購読の設定、あるいは React コンポーネント内の DOM の手動での変更、といったものはすべて副作用の例です。これらを "副作用 (side-effect)"(あるいは単に "作用 (effect)")と呼ぶことに慣れているかどうかはともかくとしても、これらのようなことをコンポーネントの中で行ったことはあるでしょう。 > ヒント > @@ -143,7 +143,7 @@ function Example() { ## クリーンアップを有する副作用 -ここまでに、クリーンアップを必要としない副作用の表現のしかたについて見てきました。しかし幾つかの副作用ではそれが必要です。例えば何らかの外部のデータソースへの**購読をセットアップしたい**ことがあります。そのような場合、メモリーリークが発生しないようにクリーンアップが必要です! クラスの場合とフックの場合とでクリーンアップをどのように行えるのか比較しましょう。 +ここまでに、クリーンアップを必要としない副作用の表現のしかたについて見てきました。しかし幾つかの副作用ではそれが必要です。例えば何らかの外部のデータソースへの**購読をセットアップしたい**ことがあります。そのような場合、メモリリークが発生しないようにクリーンアップが必要です! クラスの場合とフックの場合とでクリーンアップをどのように行えるのか比較しましょう。 ### クラスを使った例 @@ -266,7 +266,7 @@ function FriendStatus(props) { ### ヒント:関心を分離するために複数の副作用を使う -フックを[導入する動機](/docs/hooks-intro.html#complex-components-become-hard-to-understand)のページで述べた問題のひとつは、しばしばライフサイクルメソッドには無関係なロジックが含まれ、一方で関連するロジックが複数のメソッドに分割されてしまう、ということです。以下に示すのは、これまでの例で挙げたカウンタとフレンド状態インジケータとを組み合わせたコンポーネントです。 +フックを[導入する動機](/docs/hooks-intro.html#complex-components-become-hard-to-understand)のページで述べた問題のひとつは、しばしばそれぞれのライフサイクルメソッドに関連のないロジックが含まれ、一方で関連するロジックが複数のメソッドに分割されてしまう、ということです。以下に示すのは、これまでの例で挙げたカウンタとフレンド状態インジケータとを組み合わせたコンポーネントです。 ```js class FriendStatusWithCounter extends React.Component { @@ -403,7 +403,7 @@ function FriendStatus(props) { 動作は変わっておらず、前述のバグも起こらなくなります。 -`useEffect` は*デフォルトで*更新を処理するため、更新のための特別なコードは不要です。新しい副作用を適用する前に、ひとつ前の副作用をクリーンアップします。これを例示するため、このコンポーネントが発生させる可能性のある購読登録と購読解除のシーケンスをお示しします: +`useEffect` は*デフォルトで*更新を処理するため、更新のための特別なコードは不要です。新しい副作用を適用する前に、ひとつ前の副作用をクリーンアップします。これを例示するため、このコンポーネントが経時的に発生させる可能性のある購読登録と購読解除のシーケンスを示しします: ```js // Mount with { friend: { id: 100 } } props