Államirányítás React Hook-okkal

A könyv kindle és puhafedeles formátumban is elérhető

Az „Államirányítás React Hooksokkal” könyv Kindle és puhafedeles formátumban érhető el.

Az állapotkezelés gyakori kihívás a webalkalmazások fejlesztése során.
Ez a könyv az állapotkezelést vizsgálja meg a React Hooks segítségével több kis alkalmazás létrehozásával.

Íme néhány dolog, amin keresztül fogunk menni:

• Értsd meg, mi az állam
• Űrlapbemenetek kezelése
• Űrlap érvényesítés végrehajtása
• Űrlapállapot-kezelés és érvényesítés beágyazása egyéni horgokba
• Elemek hozzáadása, törlése és szerkesztése a listákban
• Az időzítő segédprogramok visszahívásain belüli állapotadatok elérése és módosítása
• Állapotkezelés kezelése adatok lekérése, keresése és lapozása során
• Megerősítő mód megjelenítése

Fejezetek

• 01. fejezet: Az állapot megértése
• 02. fejezet: Változatlan állapotadatok
• 03. fejezet: Űrlap
• 04. fejezet: Form State Custom Hook
• 05. fejezet: Legördülő lista
• 06. fejezet: A jelölőnégyzetek listája és a rádiógombok listája
• 07. fejezet: Űrlap érvényesítése
• 08. fejezet: Űrlapérvényesítés egyéni horog
• 09. fejezet: Elemek hozzáadása és törlése a listákban
• 10. fejezet: Refaktorálás a szűkítő kampóval
• 11. fejezet: Mesterrészlet
• 12. fejezet: Időzítők
• 13. fejezet: Adatok lekérése
• 14. fejezet: Keresés
• 15. fejezet: Lapozás
• 16. fejezet: Modális komponens
• 17. fejezet: Törlés megerősítésének kérése
• 18. fejezet: Elvihető

1. fejezet: Az állapot megértése

Mi az állam? Az állam csak adat?

Ezeket a kérdéseket vizsgáljuk meg ebben az első fejezetben. Megvalósítunk egy egyszerű kapcsológomb komponenst, majd levonunk néhány következtetést az állapotról.

Ez az állam?

Kezdjük azzal, hogy hozzunk létre egy függvénykomponenst, amely a isOn változótól függően On vagy Off szövegű gombot jelenít meg.

function ToggleButton() {
  const isOn = true;
  return <button>{isOn ? 'On' : 'Off'}</button>;
}

export default ToggleButton;

A függvénykomponens deklarál egy konstans isOn, amely a gomb aktuális állapotát tartja, majd feltételes renderelést használ a megfelelő szövegű gomb megjelenítéséhez, On vagy Off.

Mit szólsz, gondolhatunk-e a isOn változóra, mint állapotadatok tárolására?

Nem. A isOn nem változik. Nem jelent állapotadatokat.

Ezután lehetőséget adunk a isOn változó megváltoztatására a let deklarációval történő létrehozásával.

function ToggleButton() {
  let isOn = true;

  function toggle() {
    isOn = !isOn;
    console.log(isOn);
  }

  return (
    <button onClick={toggle}>
      {isOn ? 'On' : 'Off'}
    </button>
  );
}
export default ToggleButton;

A toggle függvény kezeli a váltógomb onClick eseményét. A gombra kattintva a isOn változóban tárolt logikai érték megváltozik, majd az új érték naplózásra kerül a konzolon.

Észreveheti, hogy bár a változó változik, a HTML nem frissül.

Mit gondolsz? A isOn változó tárolja az állapotot ezen a ponton?

Még nem. Még ha az állapot olyan adatokat jelent is, amelyek változhatnak, az adatok módosításának tükröződnie kell a képernyőn. A isOn változóban tárolt érték megváltozik, de a képernyő nem mutatja ezt a módosítást.

State Hook

A React lehetővé teszi, hogy a useState hook segédprogrammal definiáljunk ilyen változókat az állapot tárolására és a képernyő frissítésére.

A useState hook függvény felveszi a kezdeti értéket, és egy két elemű tömböt ad vissza. Az első érték olvasási hozzáférést biztosít az állapotértékhez, a második elem pedig egy setter funkció, és lehetővé teszi az állapot megváltoztatását. Ez a beállító függvény módosítja az állapotértéket, és meghívja a komponens függvényt. Ezzel megváltoztatja a HTML-t.

A következő példában a isOn változó lehetővé teszi számunkra az állapot beolvasását, a setIsOn függvény pedig megváltoztatja ezt az állapotot, és újra rendereli a HTML-t a ToogleButton függvény meghívásával. Az állapotváltozó inicializálása a false értékkel történik.

import { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  console.log(isOn);

  function toggle() {
    setIsOn(!isOn);
  }
  return (
    <button onClick={toggle}>
      {isOn ? 'On' : 'Off'}
    </button>
  );
}
export default ToggleButton;

Köszönjük érdeklődését e könyv iránt. "Kattintson ide a minta megtekintéséhez".