magdo
55 lines
3.2 KiB
TeX
55 lines
3.2 KiB
TeX
\section{Hookok}
|
|
|
|
\begin{frame}{Mi az a Hook?}
|
|
\begin{block}{Az alapgondolat}
|
|
A React 16.8 előtt az állapotkezelés és életciklus-logika csak osztály alapú komponensekben volt lehetséges. A hookok ezt hozták el \textbf{funkcionális komponensekbe} is --- így ma már egyszerűbb szintaxissal írhatunk komplex viselkedést.
|
|
\end{block}
|
|
\vspace{0.5em}
|
|
\begin{itemize}
|
|
\item A hook neve mindig \texttt{use}-szal kezdődik (pl. \texttt{useState}, \texttt{useEffect}).
|
|
\item Beépített hookok lefedik a leggyakoribb igényeket: állapot, mellékhatás, kontextus, optimalizálás.
|
|
\item \textbf{Custom hook:} saját logikát csomagolhatunk újrafelhasználható hookba --- pl. \texttt{useWindowSize}, \texttt{useAuth}.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{\texttt{useState} --- az alapvető állapot hook}
|
|
\begin{block}{Mit csinál?}
|
|
Az \texttt{useState} lehetővé teszi, hogy egy komponens \textbf{emlékezzen} valamire a renderelések között --- pl. egy számláló értékére, egy modal nyitott/zárt állapotára.
|
|
\end{block}
|
|
\vspace{0.5em}
|
|
\begin{itemize}
|
|
\item Visszaad egy értéket és egy \textbf{szetter függvényt}: \texttt{const [ertek, setErtek] = useState(kezdoErtek)}.
|
|
\item Ha a szetter meghívódik, a React \textbf{újrarendereli} a komponenst az új értékkel.
|
|
\item A kezdeti érték csak az első renderelésnél számít --- utána React maga kezeli.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{\texttt{useReducer} --- összetettebb állapothoz}
|
|
\begin{itemize}
|
|
\item Ha az állapot több összefüggő értékből áll, vagy a frissítési logika bonyolult, \texttt{useReducer} jobb választás lehet.
|
|
\item Működése hasonló a Redux elvéhez: van egy \textbf{akció} (mi történt) és egy \textbf{reducer} függvény (hogyan változik az állapot).
|
|
\item A frissítési logika egy helyen, a reducerben él --- olvashatóbb, tesztelhető.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{\texttt{useRef} --- referencia DOM elemre vagy értékre}
|
|
\begin{itemize}
|
|
\item Az \texttt{useRef} olyan értéket tárol, amely \textbf{nem vált ki újrarenderelést} megváltozásakor.
|
|
\item Leggyakoribb használat: közvetlen DOM-elem elérése --- pl. input fókuszálása, video lejátszás indítása.
|
|
\item Hasznos timer ID-k és előző értékek tárolására is: bármire, amit renderelések között „el akarunk menteni" anélkül, hogy az oldal frissüljön.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Hook szabályok --- miért fontosak?}
|
|
\begin{alertblock}{Alapszabályok}
|
|
\begin{enumerate}
|
|
\item Hookot csak \textbf{komponens vagy custom hook legfelső szintjén} hívjunk.
|
|
\item Ne ciklusban, feltételben vagy beágyazott függvényen belül hívjuk.
|
|
\end{enumerate}
|
|
\end{alertblock}
|
|
\vspace{0.5em}
|
|
\begin{itemize}
|
|
\item \textbf{Miért?} A React a hookok \emph{hívási sorrendje} alapján párosítja az állapotokat a komponenshez. Ha a sorrend változik (pl. feltétel miatt kimarad egy hook), React összetéveszti, melyik állapot melyikhez tartozik.
|
|
\item Az ESLint \texttt{eslint-plugin-react-hooks} csomag automatikusan ellenőrzi ezeket.
|
|
\end{itemize}
|
|
\end{frame} |