Sva tri dijele logiku između komponenti, ali su se razvijali tijekom vremena i prilagođeni hook-ovi su moderni zadani raspored za dijeljenje logike.
Funkcija koja prima komponentu i vraća poboljšanu:
= => {
user = ();
user ? : ;
};
= ();
Nedostaci: ugneždavanje wrapper-a ("wrapper hell" u stablu), sudari imena svojstava, i nije jasno odakle dolaze ubrizgana svojstva.
Komponenta prima funkciju kao dijete da dijeli stanje:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Fleksibilna, ali ugneždavanje nekoliko render-prop komponenti stvara "piramidu povratnog poziva."
Izdvojite stateful logiku u useX funkciju — bez dodatnog ugneždavanja stabla, eksplicitnog toka podataka:
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/komponenti).