React on esiotsa JavaScripti raamistik. Kuigi HTML-lehtede loomine ja nende haldamine võib muutuda tüütuks, muudab React asja lihtsamaks, jagades ekraanielemendid ja nende loogika komponentideks.

React toob lauale palju, kuid üks kasulikumaid funktsioone on olekuhaldus. Sellest artiklist saate teada, kuidas React Hooksi abil olekut hallata. Enne edasist jätkamist eeldatakse selles artiklis, et tunnete Reacti põhitõdesid.

Mis on ReactJS-i konksud?

Konks on uus kontseptsioon, mida Reactis tutvustati oleku ja muu haldamiseks Reacti omadused. Kasutades Reactis konkse, saate vältida pika koodi kirjutamist, mis muidu kasutaks klasse. Järgmine näide demonstreerib näidet useState konks.

const [muutuja, setVariable] = useState (algväärtus);

Siin on muutuv on riik ja setVariable on funktsioon, mis määrab oleku. useState on konks, mis hoiab olekumuutuja algväärtust. Ärge muretsege, kui see pole teie jaoks mõttekas. Selle õpetuse lõpuks saate konksudest kindlalt aru.

Konkse on kahte tüüpi:

• Põhikonksud
  1. useState
  2. useEffect
  3. useContext
• Lisakonksud
  1. useRef
  2. kasutaMemot
  3. useReducer

useState()

The useState konks aitab olekut hallata. Varem Reacti arenduses toimus riigijuhtimine klasside abil. Oleku süntaks kirjutati konstruktori sees ja kasutas see märksõna. Reacti konksude kasutuselevõtuga on arendajatel vabadus hallata olekut funktsionaalsete komponentide abil.

Reacti konksude süntaksi kohta saate vaadata eelmist näidet. Kõige lihtsam näide seletamiseks useState() on loendusmuutuja näide:

import {useState} kohast "react";
function App() {
const [loendus, setCount] = useState (0);
tagasi (


Konksude näide

{count}

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



);
}

The useState konksul on muutuja ja meetod, mida kasutatakse muutuja väärtuse määramiseks. The useState hook aktsepteerib parameetrina oleku algväärtust. Saate määrata loenduse muutujale mis tahes väärtuse, kasutades setCount meetod.

Ülaltoodud koodis on kaks nuppu väärtuse suurendamiseks ja vähendamiseks loendama muutuv. Suurendamise ajal saate praegusele loendusolekule lisada +1 ja loenduse 1 võrra vähendamiseks -1.

useEffect

The useEffect hook värskendab veebilehel olekut pärast iga olekumuutust. The useEffect konks võeti kasutusele klassipõhiste komponentide kõrvalmõjude eemaldamiseks. Enne funktsioonipõhiste komponentide kasutuselevõttu jälgiti oleku muutusi elutsükli komponentide abil: komponentDidMount ja komponentDidUpdate. The useEffect hook aktsepteerib sõltuvuste massiivi. Kõiki sõltuvuste massiivi mainitud olekumuutujate muudatusi jälgitakse ja kuvatakse kasutades useEffect konks.

Klassikaline näide selle kasutamisest useEffect konks on andmete toomine API-st või postituse meeldimiste või tellimuste arvutamine.

useEffect(()=>{
// kood
},[sõltuvuste massiiv]);

Arvestades ülaltoodud näidet

import { useState, useEffect } kohast "react";
function App() {
const [loendus, setCount] = useState (0);
useEffect(() => {
document.title = `Olete klõpsanud ${count} korda`;
}, [loendus]);
tagasi (


Konksude näide

{count}

 setCount (loendus + 1)}>Lisa



);
}

Möödumisel loendama olekumuutuja useEffect sõltuvuste massiiv, kontrollib see, kas olek on muutunud või mitte. Seejärel määrab see dokumendi pealkirja loendusmuutujaks.

useContext

The useContext konks aitab andmeid läbi komponendi edastada ilma seda käsitsi rekvisiitide kaudu tegemata. See muudab konteksti API kasutamise kiireks ja lihtsaks. Pärast näite läbimist saate paremini aru.

Esiteks mõista, kuidas kood välja näeb ilma konteksti kasutamata. Nagu näete, peate teksti rekvisiitide kaudu alamkomponendile edastama. Keerukuse vältimiseks võite kasutada useContext konks.

ekspordi vaikefunktsioon App() {
let text = "Tere, Tere tulemast MUO-sse";
tagasi (






);
}
const ChildComponent = ({ tekst }) => {
tagasi 
{text}
;
};

Esiteks looge oma põhifailis Pakkuja (App.js).

const Kontekst = React.createContext (null);

The Rakendus komponent on tipptaseme komponent või "ema" komponent. Peate kogu komponendi sellesse mähkima ja edastage alamkomponendile objekt või andmed, mida soovite renderdada.

ekspordi vaikefunktsioon App() {
let text = "Tere, Tere tulemast MUO-sse";
tagasi (








);
}

Nüüd looge alamkomponent ja pääsete tekstirekvisiidile juurde, kasutades nuppu useContext konks. Mööda Kontekst muutuv kasutamine luuaKonteksti.

const ChildComponent = () => {
let text = useContext (Context);
console.log (tekst);
tagasi 
{text}
;
};

Seotud: JavaScripti raamistikud, mida tasub õppida​​​​​

Reactiga on palju muud avastamist

Õppisite just konksude põhitõdesid. See on Reacti üks parimaid omadusi ja ka üsna arendajasõbralik. React on üks parimaid kasutajaliidese raamistikke, mida täna õppida töövõimaluste leidmiseks, üheleheliste rakenduste loomiseks või lihtsalt programmeerimisalaste teadmiste avardamiseks.

Teadmiste laiendamisest rääkides on oleku juhtimine vaid üks oskus, mida Reacti arendajad peavad harjutama. Teised põhifunktsioonid, nagu rekvisiidid, väärivad sama palju teie tähelepanu.

Kuidas kasutada ReactJS-is rekvisiite

Kui otsite näpunäiteid ReactJS-i rekvisiitide kasutamise kohta, olete õiges kohas.

Loe edasi

Autori kohta