React HooksでcomponentWillMount()を使用する方法は?

Abrar:

Reactの公式ドキュメントではそれが言及しています-

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

私の質問は- componentWillMount()ライフサイクルメソッドをフックで使用するにはどうすればよいですか?

バスカーギャンバルダン:

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

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

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

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

React HooksでcomponentWillMount()を使用する方法は?

分類Dev

react-apollo-hooksとformikで突然変異を使用する方法は?

分類Dev

Reactで、componentWillReceivePropsとcomponentWillMountのどちらを使用するかを決定する方法は?

分類Dev

Jestとreact-testing-libraryでreact-hooksを使用する方法

分類Dev

react-hooksでredux-sagasを使用する方法

分類Dev

React Hooks useEffectでoldValuesとnewValuesを比較する方法は?

分類Dev

接続されたReact-Reduxコンポーネント内でcomponentWillMountをテストする方法は?

分類Dev

React with HooksでJSONをフェッチする適切な方法は何ですか?

分類Dev

React Hooksでプロップを状態に変更する方法は?

分類Dev

ReactでsetIntervalを使用する方法は?

分類Dev

reactでfontawesomeを使用する方法は?

分類Dev

React:AddListener()でsetStateを使用する方法は?

分類Dev

React NativeでcomponentWillUnmountを使用する方法は?

分類Dev

ReactでPaperJを使用する方法は?

分類Dev

React内でanimejsを使用する方法は?

分類Dev

ReactでMSALを使用する方法は?

分類Dev

componentWillMountの状態を更新し、React Nativeのレンダリング関数でその値を使用するにはどうすればよいですか?

分類Dev

React-HooksとApolloClientを使用してReact-GraphQLに検索機能を実装する方法は?

分類Dev

React Hooks createContext:配列のときにUserContextを更新する方法は?

分類Dev

react-Hooksでタイマーをリセットする方法

分類Dev

localStorageを使用してチェックボックスの値を保存する方法は?(react + hooks)

分類Dev

ReactのcomponentWillMountでAPIを呼び出すことはできますか?

分類Dev

react-error-boundaryをreactで適切に使用する方法は?

分類Dev

React Hooksを使用してwithAuth()HOCを置き換えるにはどうすればよいですか?

分類Dev

TypeError dispatcher.useStateは、React Hooksを使用する場合の関数ではありません

分類Dev

IOSでfontStyleを使用する方法は?(React-Nativeを使用)

分類Dev

ReactでJqueryを使用する正しい方法は何ですか?

分類Dev

Reactのドキュメントが、componentWillMountではなく、componentDidMountでAJAXを実行することを推奨するのはなぜですか?

分類Dev

jest.spyOnでreact-hooks-testing-libraryを使用する-spyは呼び出されません

Related 関連記事

  1. 1

    React HooksでcomponentWillMount()を使用する方法は?

  2. 2

    react-apollo-hooksとformikで突然変異を使用する方法は?

  3. 3

    Reactで、componentWillReceivePropsとcomponentWillMountのどちらを使用するかを決定する方法は?

  4. 4

    Jestとreact-testing-libraryでreact-hooksを使用する方法

  5. 5

    react-hooksでredux-sagasを使用する方法

  6. 6

    React Hooks useEffectでoldValuesとnewValuesを比較する方法は?

  7. 7

    接続されたReact-Reduxコンポーネント内でcomponentWillMountをテストする方法は?

  8. 8

    React with HooksでJSONをフェッチする適切な方法は何ですか?

  9. 9

    React Hooksでプロップを状態に変更する方法は?

  10. 10

    ReactでsetIntervalを使用する方法は?

  11. 11

    reactでfontawesomeを使用する方法は?

  12. 12

    React:AddListener()でsetStateを使用する方法は?

  13. 13

    React NativeでcomponentWillUnmountを使用する方法は?

  14. 14

    ReactでPaperJを使用する方法は?

  15. 15

    React内でanimejsを使用する方法は?

  16. 16

    ReactでMSALを使用する方法は?

  17. 17

    componentWillMountの状態を更新し、React Nativeのレンダリング関数でその値を使用するにはどうすればよいですか?

  18. 18

    React-HooksとApolloClientを使用してReact-GraphQLに検索機能を実装する方法は?

  19. 19

    React Hooks createContext:配列のときにUserContextを更新する方法は?

  20. 20

    react-Hooksでタイマーをリセットする方法

  21. 21

    localStorageを使用してチェックボックスの値を保存する方法は?(react + hooks)

  22. 22

    ReactのcomponentWillMountでAPIを呼び出すことはできますか?

  23. 23

    react-error-boundaryをreactで適切に使用する方法は?

  24. 24

    React Hooksを使用してwithAuth()HOCを置き換えるにはどうすればよいですか?

  25. 25

    TypeError dispatcher.useStateは、React Hooksを使用する場合の関数ではありません

  26. 26

    IOSでfontStyleを使用する方法は?(React-Nativeを使用)

  27. 27

    ReactでJqueryを使用する正しい方法は何ですか?

  28. 28

    Reactのドキュメントが、componentWillMountではなく、componentDidMountでAJAXを実行することを推奨するのはなぜですか?

  29. 29

    jest.spyOnでreact-hooks-testing-libraryを使用する-spyは呼び出されません

ホットタグ

アーカイブ