Čo sú to háčiky a použitie?

Čo je to háčik a použitie?

React je dnes jednou z najpopulárnejších knižníc používaných pri vývoji webových aplikácií. Spôsobil revolúciu v spôsobe, akým sa vytvárajú webové aplikácie, vďaka čomu sú jednoduchšie a efektívnejšie ako kedykoľvek predtým. Jedným z kľúčových dôvodov jeho popularity je zavedenie háčikov, ktoré vývojárom uľahčili správu stavu v ich aplikáciách.

V tomto článku sa bližšie pozrieme na to, čo sú to háčiky a ako sa dajú použiť v aplikáciách React. Začneme diskutovaním o koncepte stavu v Reacte a potom prejdeme k vysvetleniu, čo sú to háčiky a ako fungujú. Poskytneme tiež príklady toho, ako možno háčiky použiť v rôznych typoch aplikácií React.

State in React

Predtým, než budeme môcť diskutovať o háčikoch, musíme najprv pochopiť pojem štátu v Reacte. V React sa stav používa na správu údajov, ktoré používa komponent. Tieto údaje môžu byť čokoľvek od reťazca alebo čísla po pole alebo objekt. Keď sa zmení stav komponentu, React automaticky znova vykreslí komponent, aby odrážal nový stav.

Existujú dva spôsoby, ako spravovať stav v Reacte: pomocou komponentov triedy a pomocou funkčných komponentov. Komponenty triedy používajú špeciálnu metódu s názvom setState na aktualizáciu stavu komponentu, zatiaľ čo funkčné komponenty sa pri správe stavu spoliehajú na háčiky.

Čo sú to háčiky?

Háčiky sú novou funkciou v Reacte, ktorá bola predstavená vo verzii 16.8. Umožňujú vývojárom využívať stavové a iné funkcie Reactu vo funkčných komponentoch. To znamená, že vývojári teraz môžu vytvárať komponenty, ktoré používajú stav bez toho, aby museli používať komponenty triedy.

Háčiky prichádzajú v rôznych formách, z ktorých každý slúži na iný účel. Najčastejšie používané háčiky sú useState, useEffect, useContext a useReducer. O každom z týchto háčikov budeme podrobnejšie diskutovať nižšie.

useState

Hák useState sa používa na správu stavu vo funkčných komponentoch. Vezme počiatočnú hodnotu ako argument a vráti pole obsahujúce aktuálny stav a funkciu, ktorú možno použiť na aktualizáciu stavu. Tu je príklad toho, ako možno použiť useState:

```javascript
importovať Reagovať, { useState } z "reagovať";

function Example() {
const [count, setCount] {{0}} useState(0);

vrátiť (

V tomto príklade používame useState na správu stavu počítadla. Počiatočná hodnota počítadla je nastavená na 0 pomocou useState. Potom použijeme setCount na aktualizáciu hodnoty počítadla pri každom kliknutí na tlačidlo.

useEffect

Hák useEffect sa používa na vykonávanie vedľajších účinkov vo funkčných komponentoch. Vedľajšie účinky sú akékoľvek akcie, ktoré sa vykonávajú mimo komponentu, ako je načítanie údajov z rozhrania API alebo aktualizácia názvu stránky.

Hák useEffect má dva argumenty: funkciu, ktorá vykonáva vedľajší efekt, a pole závislostí. Funkcia sa volá vždy, keď je komponent vykreslený a závislosti sa používajú na určenie, kedy sa má funkcia volať. Tu je príklad toho, ako možno použiť useEffect:

```javascript
import React, { useState, useEffect } z "react";

function Example() {
const [count, setCount] {{0}} useState(0);

useEffect(() => {
document.title=`Klikli ste ${count}-krát`;
}, [počet]);

vrátiť (

V tomto príklade používame useEffect na aktualizáciu názvu stránky pri každej aktualizácii počítadla. Odovzdáme pole obsahujúce premennú počet na useEffect, ktorá hovorí Reactu, aby funkciu zavolal iba vtedy, keď sa počet zmení.

použite kontext

Hák useContext sa používa na prístup k údajom, ktoré sú uložené v poskytovateľovi kontextu. Kontext je spôsob, ako zdieľať údaje medzi komponentmi bez toho, aby ste ich odovzdávali cez rekvizity.

Aby sme mohli použiť useContext, musíme najprv vytvoriť poskytovateľa kontextu pomocou funkcie createContext. Potom môžeme použiť useContext na prístup k údajom uloženým u poskytovateľa. Tu je príklad toho, ako možno použiť useContext:

```javascript
import React, { useState, useContext } z "react";

const ThemeContext=React.createContext("light");

function Example() {
const [theme, setTheme]=useState("light");

vrátiť (

setTheme("dark")}>Prepnúť na tmavý motív


);
}

function Panel s nástrojmi() {
téma const=useContext(ThemeContext);

vrátiť (

V tomto príklade používame useContext na prístup k premennej témy uloženej v poskytovateľovi ThemeContext. Premennú témy môžeme aktualizovať kliknutím na tlačidlo v komponente Príklad.

useReducer

Hák useReducer sa používa na správu komplexného stavu funkčných komponentov. Je to podobné ako háčik useState, ale namiesto priamej aktualizácie stavu používa na aktualizáciu stavu funkciu redukcie.

Funkcia redukcie má dva argumenty: aktuálny stav a akčný objekt. Vracia nový stav na základe akcie, ktorá bola vykonaná. Hák useReducer berie funkciu redukcie a počiatočný stav ako argumenty a vracia pole obsahujúce aktuálny stav a funkciu odosielania, ktoré možno použiť na vykonávanie akcií. Tu je príklad toho, ako sa dá useReducer použiť:

```javascript
importovať React, { useReducer } z "react";

redukcia funkcie (stav, akcia) {
switch (action.type) {
"prírastok" prípadu:
return { count: state.count + 1 };
prípad "zmenšiť":
return { count: state.count - 1 };
predvolene:
hodiť novú chybu ();
}
}

function Example() {
const [stav, odoslanie] {{0}} useReducer(reducer, { count: 0 });

vrátiť (

V tomto príklade používame useReducer na správu stavu počítadla. Odovzdáme funkciu redukcie, ktorá aktualizuje premennú počtu na základe vykonanej akcie. Na vykonanie akcií potom použijeme funkciu odoslania.

Záver

Háčiky uľahčili spravovanie stavu v aplikáciách React ako kedykoľvek predtým. Umožňujú nám vytvárať funkčné komponenty, ktoré môžu využívať stavové a iné funkcie Reactu bez toho, aby sme museli používať komponenty triedy. V tomto článku sme rozobrali najčastejšie používané háčiky v React: useState, useEffect, useContext a useReducer. Poskytli sme tiež príklady toho, ako môžu byť tieto háčiky použité v rôznych typoch aplikácií React.

Pochopením toho, ako háky fungujú a ako ich používať, môžete vo svojich aplikáciách React písať efektívnejší a udržiavateľnejší kód. Ak ste tak ešte neurobili, odporúčame vám začať používať háčiky vo svojich vlastných projektoch a vyskúšať si výhody, ktoré prinášajú do vášho vývojového pracovného postupu.