ReactJS useState Hook - líná inicializace a předchozí stav

Stav komponenty

ReactJS je knihovna uživatelského rozhraní založená na komponentách. Každá ze složek, které vytváříme, by měla mít individuální odpovědnost. V reálném světě aplikace ReactJS musí komponenty vzájemně spolupracovat výměnou informací nebo dat. Existuje několik způsobů, jak spolu mohou komponenty mluvit, například předávání props , čímž se vytvoří jediný zdroj data context nebo store ke čtení a zápisu dat.

I když tato interakce dělá aplikaci dynamickou, komponenty musí také zpracovávat soukromé informace. Každá součást musí sledovat tuto změnu informací, aby dosáhla výsledku. Soukromé informace (nebo data) komponenty se nazývají state .

Obrázek výše ukazuje znázornění stavu komponenty a podpěr, kterými prochází.

useState Háček

S vynálezem funkčních komponent v ReactJS můžeme provádět správu stavu pomocí známého háku zvaného useState . Pomocí tohoto háku deklarujeme a sledujeme stav komponenty. Vezme volitelný argument jako hodnotu počátečního stavu a vrátí aktuální stav a funkci, která jej aktualizuje.

const [counter, setCounter] = useState(1);

Ve výše uvedeném fragmentu kódu inicializujeme counter stavu s hodnotou 1 a proměnnou counter nám vždy poskytne hodnotu aktuálního stavu. Pokud chceme aktualizovat stav, neaktualizujeme přímo counter variabilní. Místo toho budeme explicitně volat setCounter() a aktualizujte hodnotu stavu.

const incrBy3() => {
   setCounter(counter + 3);
}

Metoda incrBy3() aktualizujte aktuální stav zvýšením hodnoty čítače o 3 . Aktualizace stavu spustí opětovné vykreslení vaší komponenty. Znamená to useState hook se volá interně, aby vám poskytl aktualizované counter hodnotu, kterou můžete použít ve svém JSX.

<div className="counter-box">
    <span>{ counter }</span>
    <button onClick={incrBy3}>+ 3</button>
</div>

Výše uvedený fragment ukazuje kód JSX, který vykresluje hodnotu aktuálního stavu (counter ) a událost kliknutí na tlačítko, která používá funkci updater (setCounter() ) změnit stav.

Pokud vše dáme dohromady do komponenty ReactJS, bude to vypadat takto,

import React, { useState } from 'react';

export default function App() {
  const [counter, setCounter] = useState(1);

  const incrBy3 = () => {
    setCounter(counter + 3);
  };

  return (
    <div className="container">
      <h1>Increment By 3</h1>
      <div className="counter-box">
        <span>{ counter }</span>
        <button onClick={incrBy3}>+ 3</button>
      </div>
    </div>
  );
}

Výstup,

To je skvělé!!! Ale co ten Lazy Initialization a Previous State 😲? Ach ano, pojďme na to.

Zajímavá fakta o useState Háček

Zde je třeba zdůraznit několik bodů, které často ignorujeme.

• S useState hák, stav se vytvoří pouze při prvním vykreslení pomocí počáteční hodnoty, kterou mu předáme jako argument.
• Při každém opětovném vykreslení (následné vykreslení po počátečním vykreslení) ignoruje ReactJS počáteční hodnotu, kterou předáme jako argument. V tomto případě vrací aktuální hodnotu stavu.
• ReactJS nám poskytuje mechanismus pro získání hodnoty předchozího stavu při práci s hodnotou aktuálního stavu.

To je o zajímavých faktech vše, ale bez pochopení jejich výhod nemusí dávat velký smysl. Existují tedy dvě hlavní výhody,

• Můžeme provést línou inicializaci stavu.
• Můžeme použít předchozí hodnotu stavu vedle aktuální k vyřešení případu použití.

Pojďme se je naučit na příkladech níže.

Jak provést línou inicializaci stavu?

Pokud jsou hodnotou počátečního stavu jednoduchá data, jako je číslo, řetězec atd., jsme v pořádku s tím, jak jsme vytvořili a inicializovali stav ve výše uvedeném příkladu. Občas můžete chtít inicializovat stav s vypočítanou hodnotou. Výpočet může být intenzivní a časově náročná činnost.

Pomocí useState hák, můžete předat funkci jako argument pro línou inicializaci stavu. Jak bylo uvedeno, počáteční hodnota je potřebná pouze jednou při prvním vykreslení. Nemá smysl provádět tento náročný výpočet na následných renderech.

const [counter, setCounter] = useState(() => Math.floor(Math.random() * 16));

Fragment kódu výše líně inicializuje counter stavu s náhodným číslem. Vezměte prosím na vědomí, že to nemusíte dělat vždy, ale znalosti stojí za to. Nyní víte, že máte způsob, jak provést inicializaci líného stavu.

Jak získat předchozí stavová data a používat je?

useState hook vrátí funkci pro aktualizaci stavu. V našem příkladu to známe jako setCounter(value) metoda. Specialitou této metody je, že můžete získat předchozí (nebo starou) hodnotu stavu pro aktualizaci stavu. Podívejte se prosím na fragment kódu níže,

const incrBy3 = () => {
    setCounter((prev) => prev + 3);
};

Zde předáme funkci zpětného volání do setCounter() metoda nám dává předchozí hodnotu k použití. Není to úžasné?

Aktualizovaný zdrojový kód s línou inicializací a předchozím použitím stavových hodnot naleznete zde:Zdrojový kód na Stackblitz

Závěr

Na závěr, standardní háčky ReactJS mají co nabídnout, když používáte funkční komponenty. useState hook nám pomáhá vytvářet a sledovat změny stavu. Znáte další informace o lazy initialization a previous state hodnota nám může pomoci řešit situace.

Jste v RaectJS a ekosystému kolem něj noví nebo chcete porozumět základům? Spustil jsem sérii videí, která vám pomohou porozumět ReactJS prakticky a zásadně. Zde je video ze série, které vám může pomoci.

Sdílím své znalosti na,

• 🌐 Vývoj webu (JavaScript, ReactJS, Next.js, Node.js, atd...)
• 🛡️ Webová bezpečnost
• 💼 Kariérní rozvoj
• 🌱 Opensource
• ✍️ Vytváření obsahu

Pojďme se připojit,

• Dejte sledovat na Twitteru
• Přihlaste se k odběru mého kanálu YouTube
• Vedlejší projekty na GitHubu
• Komunita Showwcase React