รูปแบบการสื่อสารระหว่างคอมโพเนนต์พี่น้อง

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

คอมโพเนนต์พี่น้องไม่สามารถสื่อสารกันโดยตรง

รูปแบบ: สถานะร่วมในคอมโพเนนต์แม่

function Parent() {
  const [selected, setSelected] = useState(null);
  return (
    <>
      <Picker onSelect={setSelected} />
      <Detail item={selected} />
    </>
  );
}

คอมโพเนนต์พี่น้องผู้อ่านและผู้เขียน

function Picker({ onSelect }) {
  return <button onClick={() => onSelect('item-1')}>Pick item 1</button>;
}

function Detail({ item }) {
  return <p>Selected: {item}</p>;
}

การสื่อสารสองทาง

ตัวอย่างช่องกรอกข้อมูลแบบซิงโครไนซ์

function VolumeControl() {
  const [vol, setVol] = useState(50);
  return (
    <>
      <input type="range" value={vol} onChange={e => setVol(+e.target.value)} />
      <input type="number" value={vol} onChange={e => setVol(+e.target.value)} />
    </>
  );
}

หลีกเลี่ยงรูปแบบต่อต้านบัสเหตุการณ์

เมื่อคอมโพเนนต์พี่น้องอยู่ห่างกันมาก

แยกคอมโพเนนต์พี่น้องออกจากกัน

การทดสอบการสื่อสารระหว่างคอมโพเนนต์พี่น้อง

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน

ถัดไป