React Hooks を使用すると、React クラス コンポーネントをビルドしなくても、状態やその他の React 機能を使用できます。フックを使用すると、機能コンポーネントだけで完全に機能する React アプリケーションを構築できます。もうclass Example extends React.component {}必要ありません。

基本的なフック

毎日のユースケースのための日常的なフック。

React Basic Hooks
- useState
- useEffect => この記事
- useContext => 近日公開予定

useEffect

useEffect の公式ドキュメント

useEffect 関数の引数

1. コンポーネントのライフサイクル中に実行される関数。
2. 値の配列 useEffect は、起動をトリガーするための変更を監視します。空の配列を渡すと、クラス ベースの React コンポーネントcomponentDidMountとcomponentWillUnmountメソッドが模倣されます。

説明

useEffectコンポーネントが画面にレンダリングされるたびにコードを実行するために使用されます (関数の起動を特定の条件に制限することができます)。1 つのコンポーネントで の複数のインスタンスを使用することは可能ですuseEffectが、それらが常に同じ順序で実行されるようにしてください。useStateと関数が同じ順序で起動しない場合、useEffect非常に悪い時間を過ごすことになります (正しい順序付けの詳細については、以下を参照してください)。useEffect関数は、関数を返すことで自分自身をクリーンアップすることもできます。

例

基本的な使い方の理解と実行後のクリーンアップ。

次のコードは、すべてのレンダリング後に実行されます。

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

個人
ウェブ
サイト