Būsena yra bet kokie duomenys, kurie gali keistis laikui bėgant ir nuo kurių priklauso UI renderavimas. Kai būsena pasikeičia, UI atnaujinamas, kad atspindėtų šią permainą. Tai yra jūsų aplikacijos "atmintis" bet kuriuo momentu.
✓ 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
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
Modernių framework'ų pagrindinė idėja: UI = f(state). Jūs nerankiniu būdu neatnaujinate DOM; jūs keičiate būseną, ir framework'as iš naujo renderina UI, kad jis atitiktų. Spustelėjote mygtuką → count pasikeičia → rodomas skaičius atnaujinamas automatiškai.
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
Ne kintamasis nėra būsena — tik duomenys, kurie keičiasi ir veikia tai, kas renderuojama. Reikšmes, kurias galite apskaičiuoti iš esamos būsenos, neturėtumėte saugoti kaip atskirą būseną (tai rizikuoja, kad jos gali nesutapti).
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)
Būsenos supratimas kaip "duomenų, kurie keičiasi ir valdo UI" yra visapusiško frontend kūrimo pagrindas.
Mentalinis modelis UI = f(state) paaiškina, kaip veikia React/Vue/Angular — jūs valdote būseną, o vaizdas ją seka.
Atpažinti, kas yra ir nėra būsena (ir nekartoti išvedamų reikšmių), yra pirmas žingsnis ją gerai valdyti; viskas, kas yra būsenos valdyme, grindžiama šia sąvoka.