React je front-endový JavaScript framework. Zatímco vytváření HTML stránek a jejich správa může být zdlouhavé, React usnadňuje práci rozdělením prvků na obrazovce a jejich logiky do komponent.

React přináší mnohé, ale jednou z nejužitečnějších funkcí je správa stavu. V tomto článku se dozvíte, jak spravovat stav pomocí React Hooks. Než budete pokračovat dále, tento článek předpokládá, že znáte základy Reactu.

Jaké jsou háčky v ReactJS?

Hák je nový koncept představený v Reactu pro správu stavu a další funkce React. Použitím háčků v Reactu se můžete vyhnout psaní zdlouhavého kódu, který by jinak používal třídy. Následující příklad ukazuje příklad useState háček.

const [proměnná, setVariable] = useState (počáteční hodnota);

Zde variabilní je stát a setVariable je funkce, která nastavuje stav. useState je háček, který obsahuje počáteční hodnotu stavové proměnné. Nedělejte si starosti, pokud vám to nedává smysl. Na konci tohoto tutoriálu budete mít pevné uchopení háčků.

Existují dva typy háčků:

• Základní háčky
  1. useState
  2. useEffect
  3. použití kontextu
• Další háčky
  1. useRef
  2. použít Memo
  3. useReducer

useState()

The useState hák pomáhá řídit stav. Dříve při vývoji Reactu bylo řízení stavu prováděno pomocí tříd. Syntaxe stavu byla zapsána uvnitř konstruktoru a použita tento klíčové slovo. Se zavedením háčků React mají vývojáři svobodu spravovat stav pomocí funkčních komponent.

Syntaxi háčků React najdete v předchozím příkladu. Nejjednodušší příklad na vysvětlení useState() je příklad proměnné počtu:

import {useState} z "react";
function App() {
const [počet, setCount] = useState (0);
vrátit se (


Příklad háčků

{počet}

setCount (count+1)}>Add
setCount (počet-1)}>Odečíst



);
}

The useState hook má proměnnou a metodu, která se používá k nastavení hodnoty proměnné. The useState hook přijímá počáteční hodnotu stavu jako parametr. Pro proměnnou počet můžete nastavit libovolnou hodnotu pomocí setCount metoda.

Ve výše uvedeném kódu jsou dvě tlačítka pro zvýšení a snížení hodnoty počet variabilní. Při zvyšování můžete přidat +1 k aktuálnímu stavu počtu a -1 pro snížení počtu o 1.

useEffect

The useEffect hook aktualizuje stav na webové stránce po každé změně stavu. The useEffect hák byl představen k odstranění vedlejších účinků komponent založených na třídě. Před zavedením komponent založených na funkcích byly změny stavu sledovány pomocí komponent životního cyklu: komponentDidMount a componentDidUpdate. The useEffect hook přijímá pole závislostí. Všechny změny ve stavových proměnných zmíněných v poli závislostí jsou sledovány a zobrazovány pomocí useEffect háček.

Klasický příklad použití useEffect háček je načítání dat z API nebo výpočet lajků nebo odběrů u příspěvku.

useEffect(()=>{
// kód
},[pole závislostí]);

S ohledem na výše uvedený příklad

import { useState, useEffect } z "react";
function App() {
const [počet, setCount] = useState (0);
useEffect(() => {
document.title = `Klikali jste ${count}krát`;
}, [počet]);
vrátit se (


Příklad háčků

{počet}

 setCount (počet + 1)}>Přidat



);
}

Při průchodu počet stavová proměnná v useEffect pole závislostí, kontroluje, zda se stav změnil nebo ne. Poté nastaví název dokumentu na proměnnou počet.

použití kontextu

The použití kontextu hook pomáhá procházet data komponentou, aniž by to dělali ručně pomocí rekvizit. Díky tomu je používání kontextového API rychlé a snadné. Po prostudování příkladu budete lépe rozumět.

Nejprve pochopte, jak kód vypadá, aniž byste použili kontext. Jak vidíte, musíte předat text přes rekvizity do podřízené komponenty. Chcete-li se vyhnout komplikacím, můžete použít použití kontextu háček.

exportovat výchozí funkci App() {
let text = "Dobrý den, vítejte v MUO";
vrátit se (






);
}
const ChildComponent = ({ text }) => {
vrátit se 
{text}
;
};

Nejprve vytvořte poskytovatele ve svém hlavním souboru (App.js).

const Context = React.createContext (null);

The Aplikace komponenta je komponenta nejvyšší úrovně nebo „rodičovská“ komponenta. Musíte zabalit celou součást do a předejte objekt nebo data, která chcete vykreslit, na podřízenou komponentu.

exportovat výchozí funkci App() {
let text = "Dobrý den, vítejte v MUO";
vrátit se (








);
}

Nyní vytvořte podřízenou komponentu a přistupte k textové podpěře pomocí použití kontextu háček. Předat Kontext variabilní použití vytvořit kontext.

const ChildComponent = () => {
let text = useContext (Context);
console.log (text);
vrátit se 
{text}
;
};

Příbuzný: Rámce JavaScriptu, které stojí za to se naučit​​​​​

S Reactem můžete prozkoumat mnohem více

Právě jste se naučili základy háčků. Je to jedna z nejlepších funkcí Reactu a také docela přívětivá pro vývojáře. React je jedním z nejlepších frontendových rámců, které se dnes můžete naučit pro pracovní příležitosti, vytváření jednostránkových aplikací nebo jednoduše pro rozšíření znalostí o programování.

Když už mluvíme o rozšíření vašich znalostí, správa stavu je pouze jednou dovedností, kterou si vývojáři Reactu potřebují procvičit. Ostatní klíčové prvky, jako jsou rekvizity, si zaslouží stejnou pozornost.

Jak používat rekvizity v ReactJS

Pokud hledáte tipy, jak používat rekvizity v ReactJS, jste na správném místě.

Přečtěte si další

O autorovi