Mindhárom megosztja a logikát az összetevők között, de idővel fejlődtek, és az egyéni hook-ok a modern alapértelmezés a logika megosztásához.
Egy függvény, amely egy összetevőt vesz fel és egy javított összetevőt ad vissza:
= => {
user = ();
user ? : ;
};
= ();
Hátrányai: wrapper beágyazás ("wrapper hell" a fában), prop nevekből származó ütközések, és nem világos, hogy honnan származnak az injektált props.
Egy összetevő függvényt vesz fel gyermekeként az állapot megosztásához:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexibilis, de több render-prop összetevő beágyazása "callback piramiszt" hoz létre.
Nyerje ki az állapotalapú logikát egy useX függvénybe — nincs extra fábeágyazás, explicit adatáramlás:
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/összetevőket).