რას ნიშნავს state-ის აწევა?

Question

Accepted Answer

**State-ის აწევა** ნიშნავს state-ის გადატანას შვილი კომპონენტიდან **საერთო მშობელზე**, რათა მრავალმა შვილმა შეძლოს იგივე მონაცემების გაზიარება და სინქრონიზেციაში რჩება. ეს სტანდარტული გადაწყვეტილებაა, როდესაც დამათი კომპონენტებმა უნდა დაკოორდინირონ. ## პრობლემა: დამათი კომპონენტებს საერთო მონაცემები სჭირთ ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` თუ ორი დამათი კომპონენტი თითოეულმა თავისი ასლი აქვს დაკავშირებული state-ის, არანაირი გზა არ არის იმისთვის, რომ თავსებადი დარჩნენ — ერთის შეცვლა სხვაზე არ მოქმედებს. ## გადაწყვეტილება: state-ის მშობელზე აწევა ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` გაზიარებული state ახლა მშობელში (`Calculator`) ცხოვრობს. ის მნიშვნელობას *ქვემოთ* გამოსახავს როგორც prop და setter, რათა შვილებმა შეძლოს ცვლილებების მოთხოვნა (*ზემოთ*). ახლა ორივე input ასახავს იმავე წყაროს — ერთი რედაქტირება ორივესს აახლებს. ## სქემა ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` ეს იგივე "მონაცემები ქვემოთ, მოვლენები ზემოთ" ნაკადია, გამოყენებული state-ის გაზიარებისთვის. ## როდის ხდება აწევა ზედმეტი ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## რატომ აქვს მნიშვნელობა State-ის აწევა **დამათი/დაკავშირებული კომპონენტებს შორის state-ის გაზიარების** ფундამენტური ტექნიკაა კომპონენტზე დაფუძნებული ჩარჩოებში — ის ერთი სიმართის წყაროს ინარჩუნებს საერთო მშობელში, რათა შვილები სინქრონიზებულნი დარჩნენ. ხშირად ეს *პირველი* საშუალებაა, რომელიც უნდა სცადოთ Context-ის ან store-ის დამატებამდე. იმის აღიარება, თუ როდის აწიოთ (დამათი კომპონენტებმა უნდა დაკოორდინირონ) — და როდის წავიდა აწევა ძალიან შორს (იწვევს prop drilling, ამიტომ Context/store-ის დრო) — ის არის ბირთვი კომპონენტის state-ის კარგად სტრუქტურირებისთვის.