[react]UserEffectについて

1276 ワード
テキストリンク
この記事ではuseEffectについて説明します.
useEffectとは?
userEffectは、エレメントがレンダリング(更新)されたときに実行される応答フックです.最初の構成部品が表示された場合(たとえば、構成部品が変化した場合)、構成部品をレンダーするタイミングはいくつかあります.
使用例
例えば、服を売るショッピングモールがあるとします.あるプレイヤーがネット通販できれいな服を見つけ、詳細を調べるためにdetailページに入ると、プレイヤーは2秒後に在庫があまり残っていません!名前のalertウィンドウを表示する場合は、userEffectを使用してalertを実行します.
使用方法

  • import React, { useEffect} from "react"; 上部にHookをインポートします.

  • 「useEffect hook」に、作成するコードを入力します.
    • 
useEffect(() => {
    const showAlert = setTimeout(() => {
      alert("재고가 별로 안남음!");
    }, 2000);

    return () => {
      clearTimeout(showAlert);
    };
  }, []);
  //제가 만든것은 컴포넌트가 처음 렌더링 되었을때만 setTimeout 가 실행되고 나가면 clearTimeout되는 코드입니다.
    コードの表示

  • 実行関数-useEffectコールバック関数の後のコード(settimeout)

  • 構成部品が消失したときに実行する関数-バックコール関数(cleartimeout)を返します.

  • 特定の値を更新するときにのみ実行する場合は、最後のカンマの後に[]を入力して制御します.コンテンツが指定されていない場合は、コンポーネントをレンダリングするたびにuserEffectが実行されます.すなわち、[]のみを入力すると、最初の構成部品をレンダリングしたときにのみ実行され、[キー]を入力すると、キーステータス値が変化したときにのみ実行されます.
    • 参考資料
    https://ko.reactjs.org/docs/hooks-reference.html#useeffect
    仕事の中でいくつかよく使うLINUXの知識
    子要素から親に子オブジェクトを渡す方法