ยกสถานะขึ้น: หลักการและตัวอย่าง

ยินดีต้อนรับ

ปัญหา: คอมโพเนนต์พี่น้องไม่สอดคล้องกัน

การระบุบรรพบุรุษร่วม

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

ตัวอย่างการยกสถานะตัวนับขึ้น

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

พร็อพการเรียกกลับสำหรับการอัปเดต

แบบควบคุมเทียบกับแบบไม่ควบคุมหลังการยกสถานะ

การยกสถานะขึ้นหลายระดับ

ประโยชน์ของการยกสถานะขึ้น

ค่าที่คำนวณต่อยอดจากสถานะที่ยกขึ้น

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

เมื่อการยกสถานะขึ้นมากเกินไป

ตรวจสอบความเข้าใจ

สรุปทบทวน

ถัดไป