Debuggovanie a optimalizácia react.js aplikácií

1. Debuggovanie a
optimalizácia React aplikácií
Marek Šafárik

2. slido.com / #FMKE5
Ako odhaliť problematické miesto
v aplikácii

3. slido.com / #FMKE5
Profilovanie komponentov
Otvoríme aplikáciu v prehliadači Chrome s parametrom ?react_perf
V Chrome DevTools otvoríme záložku Performance.
Profilovanie funguje len v development móde.
Z profilovania vieme zistiť, ktoré komponenty sa kedy vykreslujú a ako dlho im to trvá.

4. slido.com / #FMKE5

5. slido.com / #FMKE5
Optimalizácia výkonu aplikácie

6. slido.com / #FMKE5
Vykreslenie komponentu v reacte
Keď sa zmení prop alebo state, zavolá sa prekreslenie komponentu.
Pri prekreslení sa zavolá aj prekreslenie všetkých potomkov.
Metóda render() sa volá vždy, bez ohľadu na to, či je to potrebné alebo nie.
Ak nastala zmena vo Virtual DOM, react spraví úpravu DOM.

7. slido.com / #FMKE5
Vykreslenie komponentu v reacte

8. slido.com / #FMKE5
Vykreslenie komponentu v reacte

9. slido.com / #FMKE5
Vykreslenie komponentu v reacte

10. slido.com / #FMKE5
shouldComponentUpdate()
Metóda shouldComponentUpdate Reactu povie, či je potrebné komponent prekresliť alebo nie.
Vstupom je predchádzajúci state a props.
Výstup je true alebo false. (true = prekresliť)
Implementácia tejto metódy môže výrazne zrýchliť aplikáciu.
Nesprávne použitie môže spôsobiť problémy!

11. slido.com / #FMKE5
shouldComponentUpdate() - primitívne typy
Pri primitívnych dátových typoch (Boolean, Number, String) je implementácia jednoduchá. Stačí použiť
porovnanie ===
Ak state a props obsahujú iba primitívne typy, môžeme namiesto vlastnej implementácie metódy
shouldComponentUpdate() použiť dedenie od triedy PureComponent.
Pri PureComponent sa pred vykreslením spraví jednoduché porovnanie cez === pre všetky vlastnosti v
state a props.

12. slido.com / #FMKE5
shouldComponentUpdate() - primitívne typy
shouldComponentUpdate(nextProps, nextState) {
if (this.props.name !== nextProps.name) {
return true;
} else if (this.props.status !== nextProps.status) {
return true;
}
return false;
}

13. slido.com / #FMKE5
shouldComponentUpdate() - objekty / polia
Zmena vlastnosti v objekte (doplnenie prvku do poľa) nemení referenciu na objekt. Pri porovnaní cez ===
sa vráti hodnota True.

14. slido.com / #FMKE5
shouldComponentUpdate() - objekty / polia
Možnosti:
Porovnať jednotlivé vlastnosti v objekte. Napr.
if (this.props.person.name !== nextProps.person.name) {...}
Spraviť pri úprave deep copy:
person = JSON.parse(JSON.stringify(person));
Využiť Immutable.js knižnicu
person = Immutable.Map({firstName:"Janko", lastName:"Hraško"});

15. Ďakujem za pozornosť
Marek Šafárik