Vse tri delijo logiko med komponentami, vendar so se razvijale skozi čas in custom hooks so moderni standard za deljenje logike.
Funkcija, ki sprejme komponentu in vrne izboljšano različico:
= => {
user = ();
user ? : ;
};
= ();
Slabosti: ugnezdanje oblog ("wrapper hell" v drevesni strukturi), trki imen lastnosti in nejasno je, od kod izvirajo injicirane lastnosti.
Komponenta sprejme funkcijo kot svojega otroka za deljenje stanja:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Fleksibilno, a ugnezdanje več render-prop komponent ustvari "piramido povratnih klicev".
Izloči logiko stanja v funkcijo useX — brez dodatnega ugnezdanja drevesne strukture, ekspliciten tok podatkov:
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/komponent).