Alla tre delar logik mellan komponenter, men de utvecklades över tid och custom hooks är den moderna standarden för att dela logik.
En funktion som tar en komponent och returnerar en förbättrad version:
= => {
user = ();
user ? : ;
};
= ();
Nackdelar: wrapper-nesting ("wrapper hell" i trädet), egenskapsnamnskollisioner, och det är oklart varifrån injicerade props kommer.
En komponent tar en funktion som sitt barn för att dela tillstånd:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexibel, men nesting av flera render-prop-komponenter skapar en "callback-pyramid".
Extrahera den tillståndsful logiken till en useX-funktion — ingen extra träd-nesting, explicit dataflöde:
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/komponenter).