Všechny tři sdílejí logiku mezi komponentami, ale evolučně se vyvinuly a custom hooks jsou moderní standard pro sdílení logiky.
Funkce, která vezme komponentu a vrátí vylepšenou:
= => {
user = ();
user ? : ;
};
= ();
Nevýhody: vnoření obálek ("peklo obálek" ve stromu), kolize jmen prop a nejasné, odkud se vkládané prop nacházejí.
Komponenta vezme funkci jako své dítě pro sdílení stavu:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexibilní, ale vnoření několika komponent render-prop vytváří "pyramidu zpětných volání".
Extrahujte stavuplnou logiku do funkce useX — bez dalšího vnoření stromu, explicitní tok dat:
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/komponent).Knihovna IT otázek k pohovoru s podrobnými odpověďmi — od Junior po Senior.
Přispět