Kuidas React Hookide põhialuseid ümber struktureerida?

Konksud on muutunud Reacti üsna võimsaks uueks funktsiooniks. Nad võivad hirmutada, kui te pole päris kindel, mis kulisside taga toimub. Ilu on nüüd võimeline funktsiooni komponentides olekut lihtsal (ja korduvkasutataval) viisil haldama.

Aga miks mitte kasutada klassi? Ilma teemast liiga kaugel olemata pakuvad funktsioonid sirgjoonelisemat viisi oma komponentide kirjutamiseks, juhendades teid kirjutama puhtamal ja korduvkasutataval viisil. Boonus: tavaliselt muudab see testide kirjutamise lihtsamaks.

Konksude jaoks on palju kasutusjuhtumeid, nii et ma ei sukeldu näidetesse. Mõne kiirliini abil kiirendamine ei tohiks olla liiga halb. Oletagem selle artikli huvides, et brauseriküpsised pole midagi ja need on söödavad tüübid.

Sukeldumine küpsisepurki

Siin on meil funktsioonikomponent MyCookies, mida võime pidada meie küpsistepurkiks. Ütleme nii, et tahame sisemiselt jälgida, kui palju küpsiseid meil purgis on. Uue konksude API abil saame töö käsitsemiseks lisada liini, kasutades UseState.

const MyCookies = () => {
  const [küpsised, setCookieCount] = useState (0);
  ...
};

Oota, kuidas me küpsised sellest välja saame?

Kui arvate, et ülaltoodud on võlujõud, ja huvitate, kuidas massiivi väärtusi seatakse, peate mõistma massiivi hävitamise põhitõdesid.

Objekti destrukteerimisel kasutatakse sama võtit kõikjal, kust proovite seda tõmmata, destrukteerivad massiivid massiivi üksuste järjekorra järgi.

const [üks, kaks] = [1, 2];
console.log (üks); // 1
console.log (kaks); // 2

Ehkki ülaltoodud tundub, et see nimetab neid kindlas järjekorras, pole see nii, nagu allpool näidatud:

const [kaks, üks] = [1, 2];
console.log (kaks); // 1
console.log (üks); // 2

Liigutamata küüliku tehnilisse auku, on useState funktsioon, mis tagastab massiivi, mille me oma komponendi sees hävitame.

Kuidas on lood useState enda kutsumise sees oleva 0-ga? See on lihtsalt algväärtus, milleks loome oleku astme. Sel juhul alustame kahjuks 0 küpsisega.

Tegelikult kasutage olekut

Kui meil on meie struktureeritud küpsised ja funktsioon setCookiesCount, saame hakata komponendi kohaliku olekuga suhtlema, nagu võiksite teha klassi komponendi setState kasutamisel.

Renderdamise ajal on meie küpsiste väärtus selline, nagu useState'i sisemise oleku väärtuse kutsumine, sarnaselt sellele, mida võite näha selle riigiga. Selle väärtuse värskendamiseks võime lihtsalt helistada setCookiesCount.

const MyCookies = () => {
  const [küpsised, setCookieCount] = useState (0);
  tagasi (
    <>
      

Küpsised: {küpsised}

       setCookieCount (küpsised + 1)}>         Lisage küpsis               ); };

Kui olete klassi süntaksiga rohkem harjunud, võite värskendada olekut, kasutades seda.setState, otsides midagi sellist:

klassi MyCookies laiendab React.Component {
  ehitaja () {
    Super();
    see.riik = {
      küpsised: 0
    }
  }
  renderdama () {
    tagasi (
      <>
        

Küpsised: {this.state.cookies}

         this.setState ({küpsised: this.state.cookies + 1})}>           Lisage küpsis                     )   } }

Kuidas efekte kasutada?

Sageli vajavad komponendid viisi kõrvaltoimete loomiseks, mis ei peata tingimata funktsioonikomponendi funktsionaalset voogu. Oletame, et meil on kuskilt serverisse salvestatud küpsiste arv, võiksime neid hankida, kui rakendust laaditakse.

const MyCookies = () => {
  const [küpsised, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). siis ((count) => {
      setCookieCount (arv);
    })
  });
  ...
};

Pärast komponendi renderdamist käivitatakse kõik useEffect sees olev sisu. Kõik kasutamisest tulenevad kõrvalmõjud ilmnevad alles pärast renderdamise lõpetamist. See tähendab, et kui useEffect käivitub, siis käivitame rakenduse getCookieCount ja kasutame komponendi oleku värskendamiseks oma eelmist funktsiooni setCookieCount.

Hoia kinni, seal on midagi valesti ...

Ülalolevas koodis on küll mingi jutt. See efekt käivitub iga kord, pühkides meie küpsise väärtuse kõik uued lisad algse nupu Lisa küpsis abil.

Selle vältimiseks saame funktsioonile useEffect seada 2. argumendi, mis võimaldab meil Reaktil teada saada, millal seda uuesti käivitada. Ülaltoodud näites paneb selle 2. argumendi tühjale massiivile seadmine käitama ainult ühe korra.

const MyCookies = () => {
  const [küpsised, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). siis ((count) => {
      setCookieCount (arv);
    })
  }, []);
  ...
};

Enamikul juhtudel soovite siiski edastada massiivi sõltuvusi, mille muutmise korral põhjustab useEffect uuesti tulekahju. Ütleme näiteks, et hangite konkreetse küpsise tüübi arvu ja soovite seda tüüpi muutumisel uuesti arvu saada.

const MyCookies = ({{cookieType = 'chocolate'}) = = {
  const [küpsised, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). siis ((count) => {
      setCookieCount (arv);
    })
  }, [küpsise tüüp]);
  ...
};

Ülaltoodud koodis teab React, et meie proovi küpsise tüüp muutub iga kord, et me sõltume sellest oma mõju osas ja käivitab selle efekti uuesti.

Proovin konteksti ära kasutada

Ma ei hakka süvenema Reaketi kontekstiliidese üksikasjadesse, kuna see on pisut ulatusest väljas. Kui olete aga sellega tuttav, võimaldab useContext konks hõlpsalt oma konteksti funktsioonikomponendist kasutada.

impordi BasketContext kontekstist;

const Basket = ({lapsed}) => {
  tagasi (
    
      

Minu korv

      {lapsed}        ); } // MyCookies.js const MyCookies = ({{cookieType = 'chocolate'}) = = {   const basketItems = useContext (BasketContext);   ... };

Ülaltoodud koodis, võttes arvesse meie juba loodud konteksti, saame seda konteksti kohe "kasutada" ja koguda meie kontekstipakkujasse edastatud väärtused.

Konksude puhastamine

Konksud veelgi võimsamaks muudavad nende ühendamise ja abstraheerimise. Koodi kuivatamine puhtamal viisil. Viimase kiire näitena võime võtta oma küpsiste näited useState ja useEffect ja eraldada need omaenda funktsiooni [Nimi] funktsiooniks, luues tõhusalt kohandatud konksu.

// useCookies.js
funktsioon useCookies (esialgneCookieCount) {

  const [küpsised, setCookieCount] = useState (basicCookieCount);

    useEffect (() => {
    getCookieCount (). siis ((count) => {
      setCookieCount (arv);
    })
  }, []);

  funktsioon addCookie () {
    setCookieCount (küpsised + 1);
    console.log ('');
  }

  funktsioon removeCookie () {
    setCookieCount (küpsised - 1);
    console.log ('');
  }

  tagastama {
    küpsised,
    addCookie,
    eemalda küpsis
  }
};

// MyCookies.js
const MyCookies = () => {
  const {küpsised, addCookie, removeCookie} = useCookies (0);
  ...
};

Saime oma riikliku loogika ohutult lahti võtta ja kasutada seda endiselt oma küpsiste haldamiseks.

Haavata saab veel palju

Need on 3 peamist konksu, mida React meile annab, kuid neid on palju rohkem, kui nad karbist välja pakuvad - kõigil samadel aluspõhimõtetel, mida Reaxi dokumentatsioon selgitamisel teeb.

Veel javascripti, UX-i ja muud huvitavat saab minult Twitteris.

Algselt avaldati see aadressil https://www.colbyfayock.com 17. aprillil 2019.