Wszystkie trzy służą do dzielenia logiki między komponentami, ale ewoluowały z czasem i custom hooks to nowoczesny standard do dzielenia logiki.
Robert jest twórcą, który zaczął od HOC, teraz chce zrozumieć, kiedy użyć custom hooks zamiast starszych wzorców.
Funkcja, która przyjmuje komponent i zwraca ulepszaną wersję:
= => {
user = ();
user ? : ;
};
= ();
Wady: zagnieżdżanie wrapperów ("wrapper hell" w drzewie), kolizje nazw props, i niejasne jest, skąd pochodzą wstrzykiwane props.
Komponent przyjmuje funkcję jako swojego potomka w celu dzielenia stanu:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Elastyczne rozwiązanie, ale zagnieżdżanie kilku komponentów render-prop tworzy "piramidę callback'ów".
Ekstrahuj logikę stanową do funkcji useX — bez dodatkowego zagnieżdżania drzewa, jawny przepływ danych:
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ów).