Reageer persoonlike hake

Hakies is herbruikbare funksies.

Wanneer jy komponentlogika het wat deur veelvuldige komponente gebruik moet word, kan ons daardie logika na 'n pasgemaakte Hook onttrek.

Gepasmaakte hake begin met "gebruik". Voorbeeld: useFetch.

Bou 'n haak

In die volgende kode haal ons data in ons Homekomponent en vertoon dit.

Ons sal die JSONPlaceholder -diens gebruik om vals data te gaan haal. Hierdie diens is ideaal om toepassings te toets wanneer daar geen bestaande data is nie.

Om meer te wete te kom, kyk na die JavaScript Fetch API- afdeling.

Gebruik die JSONPlaceholder-diens om vals "todo"-items te gaan haal en die titels op die bladsy te vertoon:

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 haallogika kan ook in ander komponente nodig wees, so ons sal dit in 'n pasgemaakte Hook onttrek.

Skuif die haallogika na 'n nuwe lêer om as 'n pasgemaakte Hook gebruik te word:

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"));

Voorbeeld Verduidelik

Ons het 'n nuwe lêer geskep met die naam wat ' useFetch.jsn funksie genaamd useFetchbevat wat al die logika bevat wat nodig is om ons data te gaan haal.

Ons het die hardgekodeerde URL verwyder en dit vervang met 'n urlveranderlike wat na die pasgemaakte Hook oorgedra kan word.

Laastens gee ons ons data terug vanaf ons Hook.

In index.jsvoer ons ons useFetchHaak in en gebruik dit soos enige ander Haak. Dit is waar ons die URL deurgee om data van te gaan haal.

Nou kan ons hierdie pasgemaakte Hook in enige komponent hergebruik om data van enige URL af te haal.