File tree Expand file tree Collapse file tree 1 file changed +3
-2
lines changed Expand file tree Collapse file tree 1 file changed +3
-2
lines changed Original file line number Diff line number Diff line change @@ -87,7 +87,7 @@ class Example extends React.Component {
87
87
88
88
これは、コンポーネントがマウント直後なのか更新後なのかに関係なく、大抵の場合は同じ副作用を起こしたいからです。概念的には、毎回のレンダー時に起こってほしいのですが、React のクラスコンポーネントにはそのようなメソッドは存在していません。副作用のコードを別のメソッドに抽出することは可能ですが、2 か所でそのメソッドを呼ばなければいけないことに変わりはありません。
89
89
90
- では、同じことが ` useEffect ` フックを用いればどのように可能なのか見ていきましょう 。
90
+ では、同じことが ` useEffect ` フックを用いるとどのように記述できるのか見ていきましょう 。
91
91
92
92
### フックを使った例
93
93
@@ -116,7 +116,8 @@ function Example() {
116
116
117
117
** ` useEffect ` は何をやっているのか?** このフックを使うことで、レンダー後に何かの処理をしないといけない、ということを React に伝えます。React はあなたが渡した関数を覚えており(これを「副作用(関数)」と呼ぶこととします)、DOM の更新の後にそれを呼び出します。この副作用の場合はドキュメントのタイトルをセットしていますが、データを取得したりその他何らかの命令型の API を呼び出したりすることも可能です。
118
118
119
- ** ` useEffect ` がコンポーネント内で呼ばれるのはなぜか?** コンポーネント内で ` useEffect ` を記述することで、副作用内から state である ` count ` (や任意の props)にアクセスできるようになります。それらは既に関数スコープ内に存在するので、読みだすために特別な API は必要ありません。フックは JavaScript のクロージャを活用しており、JavaScript で解決できることに対して React 特有の API を導入することはしません。
119
+ ** ` useEffect ` がコンポーネント内で呼ばれるのはなぜか?** コンポーネント内で ` useEffect ` を記述することで、副作用内から state である ` count ` (や任意の props)にアクセスできるようになります。それらは既に関数スコープ内に存在するので、参照するための特別な API は必要ありません。フックは JavaScript のクロージャを活用しており、JavaScript で解決できることに対して React 特有の API を導入することはしません。
120
+ ``` 参照するための
120
121
121
122
**`useEffect` は毎回のレンダー後に呼ばれるのか?** その通りです! デフォルトでは、副作用関数は初回のレンダー時*および*毎回の更新時に呼び出されます。あとで[カスタマイズする方法](#tip-optimizing-performance-by-skipping-effects)について説明します。「マウント」と「更新」という観点で考えるのではなく、「レンダーの後」に副作用は起こる、というように考える方が簡単かもしれません。React は、副作用が実行される時点では DOM が正しく更新され終わっていることを保証します。
122
123
You can’t perform that action at this time.
0 commit comments