Alle drie delen logica tussen componenten, maar ze zijn in de loop van de tijd geëvolueerd en custom hooks zijn de moderne standaard voor het delen van logica.
Een functie die een component neemt en een verbeterde teruggeeft:
= => {
user = ();
user ? : ;
};
= ();
Nadelen: wrapper nesting ("wrapper hell" in de boom), prop naam botsingen, en het is onduidelijk waar geïnjecteerde props vandaan komen.
Een component neemt een functie als child om state te delen:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexibel, maar het nesten van meerdere render-prop componenten creëert een "callback pyramid".
Extraheer de stateful logica in een useX functie — geen extra boom nesting, expliciete gegevensstroom:
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/componenten doorgeven).Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren