frontend elmélet

Frontend_ppt/react_js/hooks.tex

@@ -0,0 +1,55 @@
+\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}