useEffect Hook

7190 ワード

React useEffect テキストリンク

useEffect(() => {
	// func
  	return () => {
    	// cleanup func
    }
}, [deps]);

応答素子が初めて画面に現れると、消失時に特定の動作を行うことができる

要素のいくつかの状態は、更新時に使用することも、レンダリングのたびに

を使用することもできる.

主な概念

deps:依存配列(依存値が配列に入る)
-空の場合、構成部品が最初に表示されたときにのみ実行されます.

cleanup関数:userEffectのreturn関数.構成部品が置換または除去される前に呼び出されます.

構成部品の取り付け時に通常追加される操作
-propsとして受信した値を構成部品の状態に設定

REST API等の外部API処理

ライブラリ使用時

処理

setInterval、setTimeout等の非同期関数

userEffectの関数呼び出しポイントは、UIが画面に表示された後であるため、DOMに直接アクセスすることができる.

構成部品のアンインストール時に通常追加されるアクション
-clearInterval、clearTimeout等
削除

ライブラリインスタンス

depsがなければ

import { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  const { username, age, id, active } = user;
  useEffect(() => {
    console.log("컴포넌트가 화면에 나타납니다.");
    return () => {
    	console.log("컴포넌트가 화면에서 사라집니다.");
    };
  }, []);

3つの

素子が現れるため、

が3回呼び出される.
新しい

構成部品が作成された場合、構成部品は呼び出されますが、作成された構成部品を更新するときは呼び出されません.

depsが存在する場合

function User({ user, onRemove, onToggle }) {
  const { username, age, id, active } = user;
  useEffect(() => {
    console.log("user값이 설정되었습니다.");
    console.log(user);
    return () => {
      console.log("user값이 바뀌기 전");
      console.log(user);
    };
  }, [user]);