web-dev-qa-db-ja.com

React useEffect in depth / useEffect?

useEffectフックの詳細を理解しようとしています。

どの方法をいつ使用するのか、またその理由を教えてください。

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])
10
John_ny

Reactクラスのライフサイクルメソッドに精通している場合は、useEffect Hookを、componentDidMount、componentDidUpdate、componentWillUnmountを組み合わせたものと考えることができます。

1.useEffectに2番目のパラメーターがない場合:これは、コンポーネントがマウントされたとき、またはコンポーネントが更新されたときに何かを実行したい場合に使用されます。概念的には、すべてのレンダリングの後にそれが発生するようにします。

2.2番目のパラメーターを[]として使用するuseEffect:これは、コンポーネントのマウント時に何かが発生したい場合に使用されます。マウント時に一度だけ実行されます。おなじみのcomponentDidMountとcomponentWillUnmountに近いです。

3.useEffectと2番目のパラメーターで渡されたいくつかの引数:これは、例えば、プランターが渡されたときに何かが発生したい場合に使用されます。引数はあなたのケースで変更されました。

詳細については。ここを確認してください: https://reactjs.org/docs/hooks-effect.html

1
neelesh bisht

3. 2番目のパラメーターに渡されたいくつかの引数を使用したuseEffect useEffect(()=> {}、[arg])

最初に実行され、次に引数が変更された場合は再度実行されます

また、useEffect内の戻り値について質問するのも忘れてください...コンポーネントのマウントが解除されたときに実行されるクリーンアップの用途

0