React HooksでcomponentWillMount（）を使用する方法は？

既存のライフサイクルメソッド（のいずれかを使用することはできませんcomponentDidMount、componentDidUpdate、componentWillUnmountフックになど）。これらはクラスコンポーネントでのみ使用できます。また、フックを使用すると、機能コンポーネントでのみ使用できます。以下の行は、React docからのものです。

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

つまり、機能コンポーネントのクラスコンポーネントからこれらのライフサイクルメソッドを模倣することができます。

componentDidMountコンポーネントがマウントされると、内部のコードが1回実行されます。useEffectこの動作に相当するフックは

useEffect(() => {
  // Your code here
}, []);

ここの2番目のパラメーターに注意してください（空の配列）。これは一度だけ実行されます。

2番目のパラメーターuseEffectがない場合、コンポーネントのすべてのレンダリングで危険な可能性があるフックが呼び出されます。

useEffect(() => {
  // Your code here
});

componentWillUnmountクリーンアップに使用します（イベントリスナーの削除、タイマーのキャンセルなど）。以下のように、イベントリスナーを追加しcomponentDidMountて削除するとcomponentWillUnmountします。

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

上記のコードに相当するフックは次のようになります

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])