Kaikki kolme jakavat logiikkaa komponenttien välillä, mutta ne ovat kehittyneet ajan myötä ja custom hookit ovat moderni standardi logiikan jakamiseen.
Funktio, joka ottaa komponentin ja palauttaa parannetun:
= => {
user = ();
user ? : ;
};
= ();
Haitat: käärintöjen sisäkkäisyys ("käärintöjen helvetti" puussa), prop-nimien ristiriidat ja on epäselvää, mistä injektoidut propsit tulevat.
Komponentti ottaa funktion lapsekseen tilan jakamiseksi:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Joustava, mutta useiden render-prop-komponenttien sisäkkäisyys luo "callback-pyramidin".
Uuttaa tilallinen logiikka useX-funktioon — ei ylimääräistä puun sisäkkäisyyttä, eksplisiittinen datavirta:
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/komponenttien välittäminen).