React: Pielāgotie Āķi – Custom hooks

React ir daži iebūvēti āķi, piemēram, useState hook vai useRef āķis, par ko uzzinājāt iepriekš. Tomēr kā React izstrādātājs varat rakstīt arī savus īpašos pielāgotos āķus. Tātad, kāpēc lai jūs vēlētos rakstīt pielāgotu āķi?

Būtībā āķi sniedz jums atkārtojamu, racionalizētu veidu, kā tikt galā ar īpašām prasībām jūsu React lietotnēs. Piemēram, āķis useState sniedz mums uzticamu veidu, kā tikt galā ar stāvokļa atjauninājumiem React komponentos.

Pielāgots āķis ir vienkārši veids, kā iegūt funkcionalitāti, ko varat izmantot atkal un atkal. Citiem vārdiem sakot, varat kodēt pielāgotu āķi, ja vēlaties izvairīties no dublēšanās vai ja nevēlaties izveidot funkcionalitāti no jauna vairākos React projektos. Kodējot pielāgotu āķi, varat izveidot uzticamu un racionalizētu veidu, kā atkārtoti izmantot savu React lietotņu funkcionalitāti.

Lai saprastu, kā tas darbojas, izpētīsim, kā izveidot pielāgotu āķi. Lai to aplūkotu kontekstā, iekodēsim arī ļoti vienkāršu React lietotni.

Visa React lietotne atrodas tālāk esošajā lietotnes komponentā:

import { useState } from “react”;
 
function App() {
  const [skaits, pieSkaitīt] = useState(0);
 
  function pieaugums() {
    pieSkaitīt(irSkaits => irSkaits + 1)
  }
 
  return (
    <div>
      <h1>Skaits: {skaits}</h1>
      <button onClick={pieaugums}>Pieskaitīt 1</button>
    </div>
  );
}
 
export default App;

Šī ir vienkārša lietotne ar h1 virsrakstu, kas parāda skaitīšanas stāvokļa mainīgā vērtību un pogu ar onClick notikumu apstrādes atribūtu, kas, kad tiek aktivizēts, izsauc pieaugums() funkciju.

Arī āķis būs vienkāršs. Tas konsole reģistrēs mainīgā vērtību ikreiz, kad tas tiks atjaunināts.

Atcerieties, ka pareizais veids, kā rīkoties ar console.log() izsaukumiem, ir izmantot āķi useEffect.

Tātad, tas nozīmē, ka mans pielāgotais āķis:

  • Nepieciešams izmantot useEffect āķi un
  • Jābūt atsevišķam failam, ko pēc tam izmantosit lietotnes komponentā.

Kā nosaukt pielāgotu āķi?

Pielāgotam āķim ir jābūt nosaukumam, kas sākas ar use.

Tā kā šajā piemērā esošais āķis tiks izmantots vērtību reģistrēšanai konsolē, nosauksim āķi useKonsolesVērtības.

 

Pielāgota āķa kodēšana

Tagad ir pienācis laiks izpētīt, kā kodēt pielāgoto āķi.

Vispirms tas jāpievieno kā atsevišķs fails, kuram varat piešķirt nosaukumu useKonsolesVērtības.js, un jāpievieno mapes src saknei tajā pašā vietā, kur atrodas App.js komponents.

Šeit ir faila useKonsolesVērtības.js kods:

import { useEffect } from "react";


function useKonsolesVērtības(varName) {
  useEffect(() => {
    console.log(varName);
  }, [varName]);
}


export default useKonsolesVērtības;

Pielāgota āķa izmantošana

Tagad, kad pielāgotais āķis ir uzkodēts, varat to izmantot jebkurā savas lietotnes komponentā.

Tā kā piemērā lietotnei ir tikai viens komponents ar nosaukumu App, varat to izmantot, lai atjauninātu šo komponentu.

useKonsolesVērtības āķi var importēt šādi:

import useKonsolesVērtības from "./useKonsolesVērtības";

Un tad, lai to izmantotu, zem steita iestatīšanas koda es vienkārši pievienošu šādu koda rindiņu:

useKonsolesVērtības(count);

Šeit ir pabeigts faila App.js kods:

import { useState } from "react";
import useKonsolesVērtības from "./useKonsolesVērtības";


function App() {
  const [skaits, pieSkaitīt] = useState(0);
  useKonsolesVērtības(skaits);
 
  function pieaugums() {
    pieSkaitīt(irSkaits => irSkaits + 1)
  }
 
  return (
    <div>
      <h1>Skaits: {skaits}</h1>
      <button onClick={pieaugums}>Pieskaitīt 1</button>
    </div>
  );
}
 
export default App;

Šis atjauninājums apstiprina šī raksta sākumā izteikto apgalvojumu, ka pielāgotie āķi ir veids, kā iegūt funkcionalitāti, ko pēc tam var atkārtoti izmantot visās jūsu React lietotnēs.

Secinājums

Jūs esat iemācījies nosaukt, izveidot un izmantot pielāgotos āķus programmā React.

Loading

Noderīgs raksts? Dalies ar citiem: