Visi trys dalinasi logika tarp komponentų, tačiau jie evoliucionavo laikui bėgant ir custom hooks yra šiuolaikinis standartas logikai dalintis.
Funkcija, kuri paima komponentą ir grąžina patobulintą:
= => {
user = ();
user ? : ;
};
= ();
Trūkumai: wrapper nesting ("wrapper hell" medyje), prop pavadinimų susidūrimai ir neaišku, iš kur ateinančios injected props.
Komponentas paima funkciją kaip child, kad bendrautų būseną:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Lanku, bet kelių render-prop komponentų nesting'as sukuria "callback pyramid".
Išskirkite stateful logiką į useX funkciją — be papildomo medžio nesting'o, aiški duomenų srautai:
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/komponentus).