magdo
37 lines
2.2 KiB
TeX
37 lines
2.2 KiB
TeX
\section{Teljesítmény}
|
|
|
|
\begin{frame}{Mi az az újrarenderelés?}
|
|
\begin{block}{Az alapjelenség}
|
|
Amikor egy komponens állapota vagy props-a megváltozik, a React \textbf{újrarendereli} azt a komponenst --- és alapértelmezetten az összes gyermekét is. Ez legtöbbször tökéletesen gyors. Nagy és mély fáknál azonban szükségtelen újrarenderelések lassíthatnak.
|
|
\end{block}
|
|
\vspace{0.5em}
|
|
Fontos szabály: \textbf{mérjünk, aztán optimalizáljunk!} Ne alkalmazzunk előre memoizációt ott, ahol valójában nincs probléma.
|
|
\end{frame}
|
|
|
|
\begin{frame}{React DevTools Profiler}
|
|
\begin{itemize}
|
|
\item A React DevTools böngésző-bővítmény beépített \textbf{Profiler} lapján látjuk, hogy melyik komponens hányszor és mennyi ideig rendereledett.
|
|
\item Felvesszük egy interakció közben a renderelési folyamatot, majd azonosítjuk a lassú vagy felesleges részeket.
|
|
\item Csak azután nyúljunk optimalizáláshoz, ha a profiler valódi problémát mutat.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Memoizáció --- mit és mikor?}
|
|
\begin{itemize}
|
|
\item \textbf{React.memo:} ha egy komponens props-ai nem változnak, ne renderelje újra. Érdemes drága megjelenítésű, sokszor hívott komponenseken alkalmazni.
|
|
\item \textbf{useMemo:} ha egy számítás nagyon drága (pl. óriási lista szűrése), cache-eljük az eredményt --- csak akkor számítsuk újra, ha a bemenetek megváltoztak.
|
|
\item \textbf{useCallback:} ha egy függvényt props-ként adunk át, és fontos, hogy a referenciája stabil maradjon (pl. React.memo-val védett gyermeknek).
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Kódfelosztás és lusta betöltés}
|
|
\begin{block}{A probléma}
|
|
Nagy alkalmazásoknál a teljes JavaScript csomag egyszerre töltődik be --- ez lassítja az első megjelenést.
|
|
\end{block}
|
|
\vspace{0.5em}
|
|
\begin{itemize}
|
|
\item \textbf{React.lazy + Suspense:} az egyes oldalakat/modulokat csak akkor töltjük be, amikor a felhasználó ténylegesen odanavigál.
|
|
\item \textbf{Lista virtualizáció} (pl. \texttt{react-window}): ha több ezer listaelemet kell megjeleníteni, csak a látható elemeket rendereljük --- a többi DOM-ban sem szerepel.
|
|
\end{itemize}
|
|
\end{frame}
|