State არის ნებისმიერი ის მონაცემი, რომელიც შეიძლება შეიცვალოს დროის განმავლობაში და რაც UI-ს დასაჩვენებლად არის საჭირო. როდესაც state იცვლება, UI განახლდება ამის შესაბამისად. ეს არის თქვენი აპლიკაციის "მეხსიერება" ნებისმიერ მომენტში.
✓ 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>
);
}
სამუდამო ფრეიმვორკების ძირითადი იდეა: UI = f(state). თქვენ არ ანახლებთ DOM-ს ხელით; თქვენ ზეთ ცვლით state-ს, და ფრეიმვორკი თავიდან აჩვენებს UI-ს, რათა ის დაემთხვეს. დააჭირეთ ღილაკს → count იცვლება → ნაჩვენები რიცხვი ავტომატურად განახლდება.
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
არა ყველა ცვლადი არ არის state — მხოლოდ ის მონაცემი, რომელიც იცვლება და გავლენას ახდენს ნაჩვენებ ბურთზე. მნიშვნელობები, რომელიც თქვენ შეიძლება გამოთვალოთ არსებული state-დან, არ უნდა ინახებოდეს ცალ state-ად (რაც რისკს უქმნის მათ დაუსინქრონიზებელი გახდომის).
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)
state-ის გაგება როგორც "მონაცემი, რომელიც იცვლება და UI-ს კარ მართავს" არის ყველა ფრონტენდ დეველოპმენტის საფუძველი.
მენტალური მოდელი UI = f(state) ხსნის, თუ როგორ მუშაობს React/Vue/Angular — თქვენ უპირველეს ყოვლისა მართავთ state-ს, და ხედი მას მიჰყვება.
ის ცნობა, თუ რა არის და რა არ არის state (და გამოშემოდგომელი მნიშვნელობების დუბლიკატი არ გაკეთება) არის პირველი ნაბიჯი მის კარგად მართვისკენ; ყველაფერი state მენეჯმენტში აშენდება ამ კონცეფციაზე.