Mi az állapot egy frontend alkalmazásban?

Question

Accepted Answer

Az **állapot** minden olyan adat, amely **idővel megváltozhat** és amelyre a felhasználói felület függ a megjelenítéshez. Az állapot megváltozásakor a felhasználói felület frissül annak tükrözésére. Ez az alkalmazás "memóriája" bármely adott pillanatban. ## Állapot példái ```text ✓ A counter value, a form's input text, a toggle (on/off) ✓ Whether a modal is open, the active tab, loading/error flags ✓ The logged-in user, items in a cart, fetched API data ✓ The current theme (dark/light), selected filters ``` ## Az állapot irányítja a felhasználói felületet ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is state return ( ); } ``` A modern keretrendszerek alapgondolata: **UI = f(state)**. Nem frissíti manuálisan a DOM-ot; megváltoztatja az állapotot, és a keretrendszer újrarajzolja a felhasználói felületet, hogy egyezzen. Kattintson a gombra → `count` megváltozik → a megjelenített szám automatikusan frissül. ## Állapot vs. egyéb adatok ```text State: changes over time, drives re-renders (count, user, isOpen) Constants: never change (PI, config URLs) — not state Derived: computed FROM state (fullName from firstName + lastName) — don't store separately ``` Nem minden változó állapot — csak az adatok, amelyek megváltoznak *és* befolyásolják a megjelenítendőt. A meglévő állapotból kiszámítható értékeket nem szabad külön állapotként tárolni (ez kockáztatja, hogy szinkronizálódnak). ## Az állapot kategóriái ```text Local/UI state → belongs to one component (input text, isOpen) Global state → shared app-wide (user, theme, cart) Server state → data fetched from an API (cached remote data) URL state → in the address bar (filters, page number) ``` ## Miért fontos Az állapot megértése "az adatok, amelyek megváltoznak és irányítják a felhasználói felületet" alapja az összes frontend fejlesztésnek. A mentális modell **UI = f(state)** megmagyarázza, hogyan működnek a React/Vue/Angular — kezelje az állapotot, és a nézet követi. Annak felismerése, hogy mi *az* és mi *nem* állapot (és az származtatott értékek nem duplázása) az első lépés annak jó kezeléséhez; az állapotkezelés mindene erre a koncepcióra épül.