React to front-endowy framework JavaScript. Podczas gdy budowanie stron HTML i zarządzanie nimi może stać się nużące, React ułatwia to, dzieląc elementy na ekranie i ich logikę na komponenty.

React wnosi wiele do stołu, ale jedną z najbardziej przydatnych funkcji jest zarządzanie stanem. W tym artykule dowiesz się, jak zarządzać stanem za pomocą haków React. Zanim przejdziemy dalej, ten artykuł zakłada, że ​​znasz podstawy Reacta.

Czym są hooki w ReactJS?

Hak to nowa koncepcja wprowadzona w React do zarządzania stanem i innymi cechy React. Używając hooków w React, możesz uniknąć pisania długiego kodu, który w przeciwnym razie używałby klas. Poniższy przykład ilustruje przykład useState hak.

const [zmienna, setVariable] = useState (wartość początkowa);

Tutaj zmienny jest stan i ustaw zmienną to funkcja, która ustawia stan. useState jest hakiem, który przechowuje początkową wartość zmiennej stanu. Nie martw się, jeśli to nie ma dla ciebie sensu. Pod koniec tego samouczka będziesz miał solidne uchwycenie haczyków.

Istnieją dwa rodzaje haczyków:

• Haki podstawowe
  1. useState
  2. użyjEfekt
  3. useContext
• Dodatkowe haki
  1. użyjRef
  2. użyj Memo
  3. użyjReduktora

useState()

ten useState hak pomaga zarządzać stanem. Wcześniej w rozwoju Reacta zarządzanie stanem odbywało się za pomocą klas. Składnia stanu została napisana wewnątrz konstruktora i użyła ten słowo kluczowe. Wraz z wprowadzeniem haków React, programiści mają swobodę zarządzania stanem przy użyciu komponentów funkcjonalnych.

Możesz odwołać się do poprzedniego przykładu dla składni hooków React. Najprostszy przykład do wyjaśnienia useState() jest przykładem zmiennej count:

importuj {useState} z "react";
funkcja App() {
const [liczba, setCount] = useState (0);
powrót (


Przykład haczyków

{liczyć}

setCount (count+1)}>Dodaj
setCount (count-1)}>Odejmij



);
}

ten useState hook ma zmienną i metodę, która służy do ustawiania wartości zmiennej. ten useState hook przyjmuje początkową wartość stanu jako parametr. Możesz ustawić dowolną wartość zmiennej count za pomocą setCount metoda.

W powyższym kodzie znajdują się dwa przyciski do zwiększania i zmniejszania wartości liczyć zmienny. Podczas inkrementacji możesz dodać +1 do bieżącego stanu licznika i -1, aby zmniejszyć licznik o 1.

użyjEfekt

ten użyjEfekt hook aktualizuje stan na stronie internetowej po każdej zmianie stanu. ten użyjEfekt hak został wprowadzony w celu usunięcia skutków ubocznych komponentów opartych na klasach. Przed wprowadzeniem komponentów opartych na funkcjach zmiany stanu były śledzone za pomocą komponentów cyklu życia: komponentDidMount oraz componentDidUpdate. ten użyjEfekt hook akceptuje tablicę zależności. Wszystkie zmiany w zmiennych stanu wymienionych w tablicy zależności są śledzone i wyświetlane za pomocą użyjEfekt hak.

Klasyczny przykład użycia użyjEfekt haczyk jest pobieranie danych z API lub obliczanie polubień lub subskrypcji w poście.

useEffect(()=>{
// kod
},[tablica zależności]);

Biorąc pod uwagę powyższy przykład

import { useState, useEffect } z "react";
funkcja App() {
const [liczba, setCount] = useState (0);
useEffect(() => {
document.title = `Kliknięto ${count} razy`;
}, [liczyć]);
powrót (


Przykład haczyków

{liczyć}

 setCount (liczba + 1)}>Dodaj



);
}

Po przejściu liczyć zmienna stanu w użyjEfekt tablica zależności, sprawdza, czy stan się zmienił, czy nie. Następnie ustawia tytuł dokumentu na zmienną count.

useContext

ten useContext hook pomaga przekazywać dane przez komponent bez robienia tego ręcznie za pomocą rekwizytów. Dzięki temu korzystanie z Context API jest szybkie i łatwe. Po zapoznaniu się z przykładem będziesz miał lepsze zrozumienie.

Po pierwsze, zrozum, jak wygląda kod bez użycia kontekstu. Jak widać, musisz przekazać tekst za pomocą rekwizytów do komponentu potomnego. Aby uniknąć komplikacji, możesz użyć useContext hak.

eksportuj funkcję domyślną App() {
let text = "Witaj, witaj w MUO";
powrót (






);
}
const ChildComponent = ({ tekst }) => {
powrót 
{tekst}
;
};

Najpierw utwórz dostawcę w swoim głównym pliku (App.js).

const Context = React.createContext (null);

ten Aplikacja komponent jest komponentem najwyższego poziomu lub komponentem „nadrzędnym”. Musisz owinąć cały komponent w i przekaż obiekt lub dane, które chcesz renderować w komponencie podrzędnym.

eksportuj funkcję domyślną App() {
let text = "Witaj, witaj w MUO";
powrót (








);
}

Teraz utwórz komponent podrzędny i uzyskaj dostęp do właściwości tekstowej za pomocą useContext hak. Przekaż Kontekst zmienna za pomocą utwórzKontekst.

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

Związane z: Struktury JavaScriptu warte poznania​​​​​

O wiele więcej do odkrycia dzięki React

Właśnie nauczyłeś się podstaw haków. Jest to jedna z najlepszych funkcji Reacta, a także bardzo przyjazna dla programistów. React to jeden z najlepszych frameworków frontendowych, który można dziś nauczyć się w poszukiwaniu ofert pracy, tworzenia aplikacji jednostronicowych lub po prostu poszerzania wiedzy programistycznej.

Mówiąc o poszerzaniu wiedzy, zarządzanie stanem to tylko jedna umiejętność, którą programiści React muszą ćwiczyć. Inne kluczowe funkcje, takie jak rekwizyty, zasługują na taką samą uwagę.

Jak używać rekwizytów w ReactJS

Jeśli szukasz wskazówek, jak używać rekwizytów w ReactJS, jesteś we właściwym miejscu.

Czytaj dalej

O autorze