Alle drei teilen Logik zwischen Komponenten, haben sich aber im Laufe der Zeit weiterentwickelt und custom hooks sind der moderne Standard zum Teilen von Logik.
Eine Funktion, die eine Komponente annimmt und eine verbesserte zurückgibt:
= => {
user = ();
user ? : ;
};
= ();
Nachteile: Wrapper-Verschachtelung ("Wrapper-Hölle" im Baum), Namenskollisionen bei Props und unklar, woher injizierte Props kommen.
Eine Komponente nimmt eine Funktion als ihr Kind, um Zustand zu teilen:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexibel, aber das Verschachteln mehrerer render-prop-Komponenten erzeugt eine "Callback-Pyramide".
Extrahieren Sie die stateful Logik in eine useX-Funktion — keine zusätzliche Baum-Verschachtelung, expliziter Datenfluss:
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/Komponenten übergeben).