รูปแบบ Render Props

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

พร็อพสำหรับการเรนเดอร์คืออะไร

<DataProvider render={data => <UserCard user={data} />} />

ตัวอย่างพร็อพสำหรับการเรนเดอร์อย่างง่าย

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

ใช้ children เป็นพร็อพสำหรับการเรนเดอร์

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

ตัวติดตามตำแหน่งเมาส์

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

พร็อพสำหรับการเรนเดอร์เทียบกับฮุกแบบกำหนดเอง

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

เมื่อใดยังควรใช้พร็อพสำหรับการเรนเดอร์

คำเตือนด้านประสิทธิภาพ

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

การประกอบพร็อพสำหรับการเรนเดอร์

พร็อพสำหรับการเรนเดอร์ในไลบรารี

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

สรุปทบทวน

บทถัดไป