Benutzerdefinierte Hooks reagieren

Hooks sind wiederverwendbare Funktionen.

Wenn Sie eine Komponentenlogik haben, die von mehreren Komponenten verwendet werden muss, können wir diese Logik in einen benutzerdefinierten Hook extrahieren.

Benutzerdefinierte Hooks beginnen mit "use". Beispiel: useFetch.

Baue einen Haken

Im folgenden Code rufen wir Daten in unserer HomeKomponente ab und zeigen sie an.

Wir werden den JSONPlaceholder -Dienst verwenden, um gefälschte Daten abzurufen. Dieser Dienst eignet sich hervorragend zum Testen von Anwendungen, wenn keine Daten vorhanden sind.

Weitere Informationen finden Sie im Abschnitt JavaScript Fetch API .

Verwenden Sie den JSONPlaceholder-Dienst, um gefälschte „todo“-Elemente abzurufen und die Titel auf der Seite anzuzeigen:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Die Abruflogik wird möglicherweise auch in anderen Komponenten benötigt, daher werden wir sie in einen benutzerdefinierten Hook extrahieren.

Verschieben Sie die Abruflogik in eine neue Datei, die als benutzerdefinierter Hook verwendet werden soll:

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

import ReactDOM from "react-dom";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Beispiel erklärt

Wir haben eine neue Datei namens erstellt useFetch.js, die eine Funktion namens useFetchenthält, die die gesamte Logik enthält, die zum Abrufen unserer Daten erforderlich ist.

Wir haben die hartcodierte URL entfernt und durch eine urlVariable ersetzt, die an den benutzerdefinierten Hook übergeben werden kann.

Zuletzt geben wir unsere Daten von unserem Hook zurück.

In index.jsimportieren wir unseren useFetchHook und verwenden ihn wie jeden anderen Hook. Hier übergeben wir die URL, von der Daten abgerufen werden sollen.

Jetzt können wir diesen benutzerdefinierten Hook in jeder Komponente wiederverwenden, um Daten von jeder URL abzurufen.