Apakah maksud mengangkat keadaan?

Question

IT Interview Practice · Accepted Answer

**Mengangkat keadaan** bermaksud memindahkan keadaan daripada komponen anak ke **induk biasa** supaya pelbagai anak dapat berkongsi dan tetap selaras dengan data yang sama. Ini adalah penyelesaian piawai apabila komponen saudara perlu menyelaras. ## Masalah: saudara memerlukan data bersama ```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 ``` Jika dua komponen saudara masing-masing memegang salinan keadaan yang berkaitan, tidak ada cara bagi mereka untuk tetap konsisten — mengubah satu tidak menjejaskan yang lain. ## Penyelesaian: angkat keadaan ke induk ```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)} />; } ``` Keadaan bersama kini berada dalam induk (`Calculator`). Ia melewatkan nilai *ke bawah* sebagai prop dan penetap supaya anak dapat meminta perubahan (*ke atas*). Kini kedua-dua input mencerminkan sumber yang sama — mengedit satu mengemas kini kedua-duanya. ## Pola ```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) ``` Ini adalah aliran "data ke bawah, acara ke atas" yang sama, digunakan untuk membuat keadaan bersama. ## Apabila mengangkat menjadi terlalu banyak ```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. ``` ## Mengapa ini penting Mengangkat keadaan adalah teknik asas untuk **berkongsi keadaan antara komponen saudara/berkaitan** dalam rangka kerja berasaskan komponen — ia mengekalkan sumber kebenaran tunggal dalam induk biasa supaya anak tetap selaras. Ia sering kali *alat pertama* untuk dicuba sebelum menambah Context atau stor. Mengiktiraf bila perlu mengangkat (saudara perlu menyelaras) — dan bila mengangkat telah berlebihan (menyebabkan prop drilling, jadi sudah tiba masanya untuk Context/stor) — adalah teras kepada menstruktur keadaan komponen dengan baik.

Masalah: saudara memerlukan data bersama

Penyelesaian: angkat keadaan ke induk

Pola

Apabila mengangkat menjadi terlalu banyak

Mengapa ini penting

Soalan berkaitan