☰

React HooksでcomponentWillMount()を使用するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript reactjs jsx react-hooks
React HooksでcomponentWillMount()を使用するにはどうすればいいですか? 質問する

Reactの公式ドキュメントには次のように書かれています -

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

componentWillMount()私の質問は、フックでライフサイクル メソッドをどのように使用できるかということです。

ベストアンサー1

既存のライフサイクル メソッド ( componentDidMount、componentDidUpdateなどcomponentWillUnmount) はフックでは使用できません。これらはクラス コンポーネントでのみ使用できます。また、フックでは関数コンポーネントでのみ使用できます。以下の行は React ドキュメントからの引用です。

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

提案としては、関数コンポーネント内のクラスコンポーネントからこれらのライフサイクルメソッドを模倣することができます。

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

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

ここで 2 番目のパラメータ (空の配列) に注意してください。これは 1 回だけ実行されます。

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', () => {})
  }
}, [])

おすすめ記事