ユーズエフェクトフック-クイックガイド

何が役に立つか
UseEffectは、我々のコンポーネントのライフサイクルのマウント、更新、およびアンマウント段階でコードを実行することができます反応組み込みフックです.
有効なフックは2つのパラメータを受け取ります:実行される1つの関数と依存関係の配列.


例を見ましょう
私のapp.js 私は2つの入力番号と1つのボタンをCalculator コンポーネント.私たちは入力に数字を設定し、ボタンをクリックすると、状態が更新され、コンポーネントは小道具を介して番号を取得します.何も空想.

import { useRef, useState } from "react";
import "./App.css";
import Calculator from "./Calculator";

const App = () => {
  const inputA = useRef(0);
  const inputB = useRef(0);

  const [numbers, setNumbers] = useState({
    numberA: inputA.current.value,
    numberB: inputB.current.value,
  });

  const getTotalHandler = () => {
    setNumbers({
    numberA: +inputA.current.value,
    numberB: +inputB.current.value,
    });
  };

  return (
    <>
    <div className="container">
        <div>
        <label>Input A</label>
        <input type="number" ref={inputA} />
        </div>
        <div>
        <label>Input B</label>
        <input type="number" ref={inputB} />
        </div>
        <button onClick={getTotalHandler}>Calculate</button>
        <Calculator numberA={numbers.numberA} numberB={numbers.numberB} />
    </div>
    </>
  );
};

export default App;

このコンポーネントはCalculator 小道具を通して受け取るnumberA and numberB を返す.

const Calculator = ({ numberA, numberB }) => {
  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

コンポーネントがマウントされると、UseEffectを実行します
今すぐ使用しますuseEffect コンポーネントがマウントされたときにログオンする関数を実行します.まずインポートするuseEffect フックreact .

import { useEffect } from "react";

このフックを実装するには、実行する関数と依存関係の配列を設定しなければなりません.

import { useEffect } from "react";

const Calculator = ({ numberA, numberB }) => {
  useEffect(() => {
    console.log(`First render`);
  }, []);

  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

この場合、私は依存する配列を空にしました.このコードを初めてレンダリングしたときに実行したいだけです.
私が最初にコンポーネントをロードすると、コンソールに表示されます.

依存配列が空の場合、このログは、コンポーネントがマウントされたときのみ実行されます.更新するならApp コンポーネントの状態と更新Calculator このログ関数は再び実行されません.チェックしましょう

更新しましたnumberA and numberB しかし、関数は実行しませんでした.

プロップが更新されるたびにUseEffectを実行します
さて、小道具が更新される度に関数を実行しましょう.これは新しい小道具に基づいて副作用を実行するのに有用です.例えば、プロップから受け取った値に基づいてAPIから詳細を取得します.ポストの終わりには、これに関する例があります.
まずは、以前のコードに2つ目の効果を追加します.

import { useEffect } from "react";

const Calculator = ({ numberA, numberB }) => {
  useEffect(() => {
    console.log(`First render`);
  }, []);

  useEffect(() => {
    console.log(`This gets executed each time the props are updated`);
  }, [numberA, numberB]);

  return <h1>The total is {numberA + numberB}</h1>;
};

export default Calculator;

今回は、依存関係の配列を空にしておきませんでした.そして、私は、NumberaとNumberBの小道具を追加しましたので、有効なフックは、プロップの1つが更新されるたびに、関数を実行しなければならないことを知っています.動作するかどうかチェックしましょう.

はい.実際には、コンポーネントが最初にマウントされるのはuseEffect フックが実行されます.

使用して、APIからデータを取得するたびに
今、私はあなたを利用する方法を示しますuseEffect フックは、コンポーネントの小道具が更新されるたびにAPIからデータを取得します.
この例では、新しいコンポーネントを作成しましたRick それは、リックとモティパブリックAPIからデータを得るために小道具を通して受け取られるIDを使用します.

import { useState, useEffect } from "react";

const Rick = ({ id }) => {
  const [character, setCharacter] = useState(null);
  const [request, setRequest] = useState(`pendent`);

  useEffect(() => {
    setRequest(`pendent`);

    const getApiResults = (characterId) => {
    fetch(`https://rickandmortyapi.com/api/character/${characterId}`)
        .then((response) => response.json())
        .then((data) => {
        setCharacter(data);
        setRequest(`completed`);
        });
    };

    getApiResults(id);
  }, [id]);

  let content = ``;

  if (request === `completed`) {
    content = (
    <>
        <img src={character.image} alt={character.name} />
        <h1>{character.name}</h1>
    </>
    );
  }

  return content;
};

export default Rick;

からapp コンポーネントIには、乱数を生成するボタンがあり、Rick コンポーネント.最初のレンダリングでは、ボタンがあります.

しかし、たびに我々はそれが生成され、小道具を介して渡さ乱数をクリックします.これはuseEffect そのIDに基づいて、属しているリックとmorty文字を取得する関数