„React“ yra „JavaScript“ sistema. Nors HTML puslapių kūrimas ir jų valdymas gali būti varginantis, „React“ viską palengvina suskaidydama ekrano elementus ir jų logiką į komponentus.

„React“ pateikia daug, tačiau viena iš naudingiausių funkcijų yra būsenos valdymas. Šiame straipsnyje sužinosite, kaip valdyti būseną naudojant „React Hooks“. Prieš tęsdami toliau, šiame straipsnyje daroma prielaida, kad žinote „React“ pagrindus.

Kas yra „ReactJS“ kabliukai?

Kablys yra nauja koncepcija, pristatyta React, skirta valdyti būseną ir kt „React“ ypatybės. Naudodami „React“ kabliukus, galite nerašyti ilgo kodo, kuriame kitu atveju būtų naudojamos klasės. Toliau pateiktame pavyzdyje parodytas pavyzdys useState kabliukas.

const [kintamasis, setVariable] = useState (pradinė reikšmė);

Čia kintamasis yra valstybė ir setVariable yra funkcija, kuri nustato būseną. useState yra kabliukas, kuriame yra pradinė būsenos kintamojo reikšmė. Nesijaudinkite, jei tai jums nėra prasminga. Pasibaigus šiam vadovui, tvirtai suprasite kabliukus.

Yra dviejų tipų kabliukai:

• Pagrindiniai kabliukai
  1. useState
  2. naudojimoEfektas
  3. useContext
• Papildomi kabliukai
  1. useRef
  2. naudotiMemo
  3. useReducer

useState()

The useState kabliukas padeda valdyti būseną. Anksčiau „React“ kūrime valstybės valdymas buvo atliekamas naudojant klases. Būsenos sintaksė buvo parašyta konstruktoriaus viduje ir naudojama tai raktažodį. Įdiegę „React“ kabliukus, kūrėjai turi laisvę valdyti būseną naudodami funkcinius komponentus.

Norėdami sužinoti „React Hook“ sintaksę, galite peržiūrėti ankstesnį pavyzdį. Paprasčiausias paaiškinimas pavyzdys useState() yra skaičiaus kintamojo pavyzdys:

importuoti {useState} iš „react“;
function App() {
const [count, setCount] = useState (0);
grįžti (


Kabliukų pavyzdys

{count}

setCount (count+1)}>Add
setCount (count-1)}>Atimti



);
}

The useState kablys turi kintamąjį ir metodą, kuris naudojamas kintamojo vertei nustatyti. The useState kabliukas priima pradinę būsenos reikšmę kaip parametrą. Galite nustatyti bet kokią skaičiaus kintamojo reikšmę naudodami setCount metodas.

Aukščiau pateiktame kode yra du mygtukai, skirti padidinti ir sumažinti reikšmę skaičiuoti kintamasis. Didindami galite pridėti +1 prie esamos skaičiavimo būsenos ir -1, kad sumažintumėte skaičių 1.

naudojimoEfektas

The naudojimoEfektas hook atnaujina būseną tinklalapyje po kiekvieno būsenos pakeitimo. The naudojimoEfektas Kabliukas buvo pristatytas siekiant pašalinti šalutinį klasių komponentų poveikį. Prieš įvedant funkcijomis pagrįstus komponentus, būsenos pokyčiai buvo stebimi naudojant gyvavimo ciklo komponentus: komponentasDidMount ir ComponentDidUpdate. The naudojimoEfektas kabliukas priima priklausomybės masyvą. Visi priklausomybės masyve paminėti būsenos kintamųjų pokyčiai yra sekami ir rodomi naudojant naudojimoEfektas kabliukas.

Klasikinis naudojimo pavyzdys naudojimoEfektas kabliukas yra gauti duomenis iš API arba apskaičiuojant įrašo patinkančius arba prenumeruojamus skaičius.

useEffect(()=>{
// kodas
},[priklausomybių masyvas]);

Atsižvelgiant į aukščiau pateiktą pavyzdį

importuoti { useState, useEffect } iš "react";
function App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Jūs spustelėjote ${count} kartus`;
}, [skaičius]);
grįžti (


Kabliukų pavyzdys

{count}

 setCount (skaičius + 1)}>Pridėti



);
}

Pravažiuojant skaičiuoti būsenos kintamasis naudojimoEfektas priklausomybės masyvas, jis patikrina, ar būklė pasikeitė, ar ne. Tada jis nustato dokumento pavadinimą į skaičiaus kintamąjį.

useContext

The useContext kabliukas padeda perduoti duomenis per komponentą nedarant to rankiniu būdu per rekvizitus. Tai leidžia greitai ir lengvai naudoti Context API. Išnagrinėję pavyzdį, geriau suprasite.

Pirmiausia supraskite, kaip kodas atrodo nenaudodamas konteksto. Kaip matote, tekstą turite perduoti antriniam komponentui per rekvizitus. Norėdami išvengti sudėtingumo, galite naudoti useContext kabliukas.

eksportuoti numatytąją funkciją App() {
let text = "Sveiki, Sveiki atvykę į MUO";
grįžti (






);
}
const ChildComponent = ({ text }) => {
grąžinti 
{text}
;
};

Pirmiausia pagrindiniame faile sukurkite teikėją (App.js).

const Context = React.createContext (null);

The Programėlė komponentas yra aukščiausio lygio komponentas arba „pagrindinis“ komponentas. Turite apvynioti visą komponentą ir perduoti objektą ar duomenis, kuriuos norite pateikti antriniam komponentui.

eksportuoti numatytąją funkciją App() {
let text = "Sveiki, Sveiki atvykę į MUO";
grįžti (








);
}

Dabar sukurkite antrinį komponentą ir pasiekite teksto pasiūlymą naudodami useContext kabliukas. Praleiskite Kontekstas kintamasis naudojant sukurti kontekstą.

const ChildComponent = () => {
tegul tekstas = useContext (Context);
console.log (tekstas);
grąžinti 
{text}
;
};

Susijęs: „JavaScript“ sistemos, kurias verta išmokti​​​​​

Dar daug ką reikia ištirti naudojant „React“.

Jūs ką tik išmokote kabliukų pagrindus. Tai viena geriausių „React“ savybių ir gana patogi kūrėjams. „React“ yra viena geriausių sąsajų sistemų, kurias šiandien galima išmokti ieškant darbo, kuriant vieno puslapio programėles ar tiesiog norint praplėsti savo programavimo žinias.

Kalbant apie savo žinių plėtimą, būsenos valdymas yra tik vienas įgūdis, kurį „React“ kūrėjai turi praktikuoti. Kitos pagrindinės funkcijos, pvz., rekvizitas, nusipelno tiek pat jūsų dėmesio.

Kaip naudoti rekvizitus „ReactJS“.

Jei ieškote patarimų, kaip naudoti rekvizitus ReactJS, esate tinkamoje vietoje.

Skaitykite toliau

Apie autorių