เมื่อ สองคอมโพเนนต์ต้องแชร์ state เดียวกัน คุณจะย้าย ("ยก") state นั้นขึ้นไปยัง ancestor ที่ใกล้เคียงที่สุดและส่งผ่านลงมาผ่าน props เพื่อให้มี source of truth เพียงแห่งเดียว
jsx
() {
[query, setQuery] = ();
(
);
}
เมื่อ สองคอมโพเนนต์ต้องแชร์ state เดียวกัน คุณจะย้าย ("ยก") state นั้นขึ้นไปยัง ancestor ที่ใกล้เคียงที่สุดและส่งผ่านลงมาผ่าน props เพื่อให้มี source of truth เพียงแห่งเดียว
() {
[query, setQuery] = ();
(
);
}
ถ้า child แต่ละตัวเก็บ query ของตัวเอง พวกมันจะออกซิงค์ การยก state หมายความว่า input และผลลัพธ์จะเสมอกันเสมอ
การยก state สูงขึ้นอาจบังคับให้คุณส่ง props ผ่านคอมโพเนนต์ระดับกลางจำนวนมากที่ไม่ได้ใช้มัน:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children เพื่อให้ข้อมูลอยู่ที่ที่ใช้งาน แทนที่จะเธรดหลักการแนะนำ: ยก state เพียงสูงเท่าที่ต้องการ — ไม่ใช่สูงกว่า การยกสูงเกินไปทำให้เกิด re-renders กว้างและ prop drilling การยกต่ำเกินไปทำให้เกิด duplicates ที่ออกซิงค์