A React egy előtérbeli JavaScript-keretrendszer. Míg a HTML-oldalak készítése és kezelése fárasztó lehet, a React megkönnyíti a dolgokat azáltal, hogy a képernyőn megjelenő elemeket és azok logikáját komponensekre bontja.

A React sokat hoz az asztalra, de az egyik leghasznosabb funkció az állapotkezelés. Ebből a cikkből megtudhatja, hogyan kezelheti az állapotot a React Hooks segítségével. Mielőtt továbblépne, ez a cikk feltételezi, hogy ismeri a React alapjait.

Mik azok a horgok a ReactJS-ben?

A horog egy új koncepció, amelyet a React-ban vezettek be az állapotok és egyéb kezelések kezelésére a React jellemzői. Ha a React programban hookot használ, elkerülheti, hogy olyan hosszú kódot írjon, amely egyébként osztályokat használna. A következő példa egy példát mutat be a useState horog.

const [változó, setVariable] = useState (kezdeti érték);

Itt a változó az állam és a setVariable az állapotot beállító függvény. useState az a horog, amely az állapotváltozó kezdeti értékét tartalmazza. Ne aggódjon, ha ennek nincs értelme az Ön számára. Ennek az oktatóanyagnak a végére már szilárdan fogod tudni a horgokat.

Kétféle horog létezik:

• Alap horgok
  1. useState
  2. useEffect
  3. useContext
• További horgok
  1. useRef
  2. useMemo
  3. useReducer

useState()

Az useState horog segít az állapot kezelésében. Korábban a React fejlesztésben az állapotkezelés osztályok segítségével történt. Az állapotszintaxist a konstruktor belsejébe írták, és a ez kulcsszó. A React hook bevezetésével a fejlesztők szabadon kezelhetik az állapotokat funkcionális összetevők segítségével.

A React hook szintaxisát az előző példában találhatja meg. A legegyszerűbb magyarázat useState() a számláló változó példája:

import {useState} a "react"-ból;
function App() {
const [számlálás, setCount] = useState (0);
Visszatérés (


Példa a horgokra

{számol}

setCount (count+1)}>Add
setCount (count-1)}>Kivonás



);
}

Az useState A hook-nak van egy változója és egy metódusa, amellyel beállíthatja a változó értékét. Az useState hook az állapot kezdeti értékét fogadja el paraméterként. A count változó tetszőleges értékét beállíthatja a setCount módszer.

A fenti kódban két gomb található az érték növelésére és csökkentésére számol változó. Növelés közben hozzáadhat +1-et az aktuális számlálási állapothoz, és -1-et a szám 1-gyel való csökkentéséhez.

useEffect

Az useEffect A hook minden állapotváltozás után frissíti a weboldal állapotát. Az useEffect hook került bevezetésre az osztályalapú alkatrészek mellékhatásainak eltávolítására. A funkcióalapú komponensek bevezetése előtt az állapotváltozásokat az életciklus-komponensek segítségével követték nyomon: komponentDidMount és komponentDidUpdate. Az useEffect hook elfogad egy függőségi tömböt. A függőségi tömbben említett állapotváltozók minden változása nyomon követhető és megjeleníthető a useEffect horog.

Klasszikus példa a használatára useEffect horog az adatok lekérése egy API-ból vagy egy bejegyzés kedvelésének vagy feliratkozásának kiszámítása.

useEffect(()=>{
// kód
},[függőségi tömb]);

Figyelembe véve a fenti példát

import { useState, useEffect } from "react";
function App() {
const [számlálás, setCount] = useState (0);
useEffect(() => {
document.title = `${count} alkalommal kattintottál`;
}, [számol]);
Visszatérés (


Példa a horgokra

{számol}

 setCount (count + 1)}>Hozzáadás



);
}

Elhaladva a számol állapotváltozó a useEffect függőségi tömb, ellenőrzi, hogy az állapot megváltozott-e vagy sem. Ezután beállítja a dokumentum címét a count változóra.

useContext

Az useContext hook segít átadni az adatokat a komponensen anélkül, hogy azt manuálisan, kellékeken keresztül tenné. A Context API használatát gyorssá és egyszerűvé teszi. Egy példa végigfutása után jobban megértheti.

Először is értse meg, hogyan néz ki a kód a Context használata nélkül. Amint látja, a szöveget kellékeken keresztül kell átadnia a gyermekkomponensnek. A bonyolultságok elkerülése érdekében használhatja a useContext horog.

alapértelmezett függvény exportálása App() {
let text = "Üdvözöljük a MUO-ban";
Visszatérés (






);
}
const ChildComponent = ({ szöveg }) => {
Visszatérés 
{szöveg}
;
};

Először hozzon létre egy szolgáltatót a fő fájljában (App.js).

const Context = React.createContext (null);

Az App komponens a legfelső szintű komponens vagy "szülő" komponens. A teljes alkatrészt be kell csomagolni a és adja át a renderelni kívánt objektumot vagy adatokat a gyermekkomponensnek.

alapértelmezett függvény exportálása App() {
let text = "Üdvözöljük a MUO-ban";
Visszatérés (








);
}

Most hozzon létre egy gyermekkomponenst, és nyissa meg a szöveget a segítségével useContext horog. Adja át a Kontextus változó használatával CreateContext.

const ChildComponent = () => {
let text = useContext (Context);
console.log (szöveg);
Visszatérés 
{szöveg}
;
};

Összefüggő: A JavaScript-keretrendszereket érdemes megtanulni​​​​​

Még sok felfedeznivaló a React segítségével

Most tanultad meg a horgok alapjait. Ez a React egyik legjobb tulajdonsága, és meglehetősen fejlesztőbarát is. A React az egyik legjobb előtér-keretrendszer, amellyel ma tanulhatsz munkalehetőségekért, egyoldalas alkalmazások létrehozásához vagy egyszerűen csak programozási ismereteid bővítéséhez.

Ha már a tudás bővítéséről beszélünk, az állapotkezelés csak egy olyan készség, amelyet a React fejlesztőinek gyakorolniuk kell. Más kulcsfontosságú funkciók, mint például a kellékek, ugyanilyen nagy figyelmet érdemelnek.

A kellékek használata a ReactJS-ben

Ha tippeket keres a ReactJS kellékeinek használatához, akkor jó helyen jár.

Olvassa el a következőt

A szerzőről