Render Props Deseni

Hoş Geldiniz

Oluşturma Özellikleri Nedir?

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

Basit Oluşturma Özelliği Örneği

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

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

Çocukları Oluşturma Özelliği Olarak Kullanma

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

Fare Konumu İzleyicisi

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>
  );
}

Oluşturma Özellikleri ve Özel Kancalar

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

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

Oluşturma Özellikleri Ne Zaman Hâlâ Mantıklıdır

Performans Uyarısı

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

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

Oluşturma Özelliklerini Birleştirme

Kitaplıklarda Oluşturma Özellikleri

Hızlı Kontrol

Özet

Sırada