การยกสถานะขึ้นไปหมายถึงอะไร

Question

Accepted Answer

**การยกสถานะขึ้นไป** หมายถึงการย้ายสถานะจากคอมโพเนนต์ย่อยไปยัง**พาเรนต์ร่วม**เพื่อให้คอมโพเนนต์ย่อยหลายตัวสามารถแชร์และอยู่ในสถานะซิงค์กับข้อมูลเดียวกัน นี่คือวิธีแก้ปัญหาแบบมาตรฐานเมื่อคอมโพเนนต์พี่น้องต้องประสานงาน ## ปัญหา: พี่น้องต้องการข้อมูลที่แชร์ ```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 ``` ถ้าคอมโพเนนต์พี่น้องสองตัวแต่ละตัวเก็บสำเนาสถานะที่เกี่ยวข้องของตัวเอง จะไม่มีวิธีให้พวกมันอยู่ในสถานะที่สอดคล้องกัน — การเปลี่ยนแปลงหนึ่งไม่ส่งผลต่ออีกตัว ## วิธีแก้ปัญหา: ยกสถานะไปยังพาเรนต์ ```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)} />; } ``` สถานะที่แชร์นี้ตอนนี้อยู่ในพาเรนต์ (`Calculator`) มันส่งค่า*ลง*เป็น prop และ setter เพื่อให้คอมโพเนนต์ย่อยสามารถขอการเปลี่ยนแปลง (*ขึ้น*) ตอนนี้ฟิลด์อินพุตทั้งสองสะท้อนแหล่งเดียวกัน — การแก้ไขแหล่งหนึ่งจะอัปเดตทั้งสอง ## รูปแบบ ```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) ``` นี่คือโปรแกรมไหล "ข้อมูลลง เหตุการณ์ขึ้น" เดียวกัน ใช้เพื่อทำให้สถานะแชร์ ## เมื่อการยกขึ้นไปมากเกินไป ```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. ``` ## ทำไมจึงมีความสำคัญ การยกสถานะขึ้นไปเป็นเทคนิคพื้นฐานสำหรับ**แชร์สถานะระหว่างคอมโพเนนต์พี่น้อง/ที่เกี่ยวข้อง**ในกรอบงานที่ใช้คอมโพเนนต์ — ซึ่งช่วยรักษาแหล่งความจริงเพียงแหล่งเดียวในพาเรนต์ร่วมเพื่อให้คอมโพเนนต์ย่อยอยู่ในสถานะซิงค์ มักจะเป็น*เครื่องมือแรก*ที่ต้องใช้ก่อนเพิ่มบริบท (Context) หรือ store การรู้ว่าเมื่อใดควรยก (พี่น้องต้องประสานงาน) — และเมื่อการยกขึ้นไปมากเกินไป (ทำให้เกิด prop drilling ดังนั้นจึงถึงเวลาใช้บริบท/store) — เป็นส่วนหลักในการจัดโครงสร้างสถานะคอมโพเนนต์ให้ดี