Üçü de bileşenler arasında mantık paylaşır, ancak zaman içinde evrim geçirdiler ve custom hooks modern varsayılan mantık paylaşımı için.
Bir bileşen alan ve geliştirilmiş bir bileşen döndüren bir fonksiyon:
= => {
user = ();
user ? : ;
};
= ();
Eksiklikleri: wrapper iç içe geçmesi (ağaçta "wrapper hell"), prop adı çakışmaları ve inject edilen propların nereden geldiği belirsiz.
Bir bileşen durumu paylaşmak için kendi alt öğesi olarak bir fonksiyon alır:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Esnektir, ancak birkaç render-prop bileşenini iç içe geçirmek bir "callback piramidi" oluşturur.
Stateful mantığı bir useX fonksiyonuna çıkarın — ek ağaç iç içe geçmesi yok, açık veri akışı:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => { /* attach listener, cleanup */ }, []);
return pos;
}
function Component() {
const { x, y } = useMouse(); // clear, flat, composable
}
children/bileşenleri geçme).