As presented at DevDuck #2 - JavaScript meetup for developers (www.devduck.pl)
-----
Looking for a company to build you an react based apps? www.brainhub.eu
3. Podstawowa zasada Reacta...
BUDUJ KOMPONENTY, nie templatki
● Komponenty stanowią spójne jednostki
● Warstwa logiki i prezentacji są ze sobą silnie powiązane
● Warstwa prezentacji dysponuje wszystkimi możliwościami JS
7. JSX
● Znaczniki przypominające HTML
● Opis UI umieszczony bezpośrednio w kodzie JS w
sposób deklaratywny
● Połączenie łatwości użycia templatek z możliwościami
jakie daje JS
9. Tradycyjna optymalizacja
● Unikaj obciążających operacji na DOMie
● Minimalizuj dostęp do DOMa
● Unikaj modyfikowania templatek przy pomocy JSa
10. Co na to React?
Renderuj wszystko przy każdej aktualizacji
11. Virtual DOM
1. Stwórz opis UI komponentu
2. Porównaj z poprzednim stanem
3. Wylicz minimalny zestaw zmian do wprowadzenia w
DOMie
4. Umieść wszystkie zmiany jednocześnie
4 operacje, które sprawiają, że to działa
14. Cykl życia komponentu
constructor(props)
Kiedy?
Przed zamontowaniem komponentu
● Może być wykorzystany np. Do ustawienia
początkowych wartości state’u
● Jeśli implementujemy własny constructor() w
klasie dziedziczącej o React.Component
musimy pamiętać o super(props)
Montowanie
15. Cykl życia komponentu
componentWillMount()
Kiedy?
Przed zamontowaniem komponentu, ale po constructor()
● Zmiana state’u w tym miejscu nie powoduje re-renderingu
● Twórcy reacta doradzają używanie constructor() zamiast
componentWillMount()
Montowanie
16. Cykl życia komponentu
render()
Kiedy?
Bezpośrednio po zamontowaniu komponentu i przy każdej
aktualizacji
● Wartość zwracana przez tę metodę nie jest węzłem DOMa
● Wartość zwracana stanowi opis UI i jest porównywana z
wartością poprzednią przez Virtual DOM w celu
wykonania jak najmniejszej ilości zmian w DOMie
Montowanie
17. Cykl życia komponentu
componentDidMount()
Kiedy?
Wywoływany natychmiast po zamontowaniu komponentu
● Idealne miejsce do umieszczenia wszelkiego rodzaju
inicjalizacji potrzebnych w DOMie
● Zmiana state’u w tym miejscu powoduje re-rendering
Montowanie
18. Cykl życia komponentu
componentWillReceiveProps(nextProps)
Kiedy?
Przed otrzymaniem nowych propsów przez zamontowany
komponent
● Jako argument dostajemy nowe propsy, które możemy
porównać z obecnymi i wykonać dodatkowe działania, jeśli
tego potrzebujemy (np. zmiana state’u)
Aktualizacja
19. Cykl życia komponentu
shouldComponentUpdate(nextProps, nextState)
Kiedy?
Przed render() gdy komponent otrzyma nowe propsy
● Pozwala zapobiec re-renderowaniu
(Wystarczy, że zwrócimy false)
● Nie jest wywoływana przed pierwszym wywołaniem
render() oraz po wywołaniu forceUpdate()
● Zwrócenie false, nie zapobiega re-renderowaniu
komponentów dzieci, jeśli ich wewnętrzny state ulegnie
zmianie
Aktualizacja
20. Cykl życia komponentu
componentWillUpdate(nextProps, nextState)
Kiedy?
Bezpośrednio przed render() gdy komponent otrzyma nowe
propsy lub wartości state’ów
● Nie można w tym miejscu dokonywać zmian state’a
● Nie zostanie wywołany gdy shouldComponentUpdate()
zwróci false
Aktualizacja
22. Cykl życia komponentu
componentDidUpdate(prevProps, prevState)
Kiedy?
bezpośrednio po render() gdy komponent został
zaktualizowany
● Nie można w tym miejscu dokonywać zmian state’a
● Nie jest wywoływana po pierwszym renderze
● Jako argumenty dostajemy poprzednie wartości props i
state, więc mamy możliwość wykonania działań, które
muszą być wykonane po renderze i są zależne od zmian
w props i state.
Aktualizacja
24. this.props
● Zawiera zestaw danych definiowanych zazwyczaj
podczas wywołania komponentu
● Dane zawarte w this.props są wartościami, tylko do
odczytu
● Szczególnym przypadkiem propsa jest this.props.child,
który zazwyczaj jest definiowany przez umieszczenie jako
dziecko wewnątrz tagu JSX.
25. this.state
● Zawiera zestaw danych specyficznych dla komponentu
● Dane zawarte w this.state są wartościami, które mogą być
modyfikowane (powodują przy tym re-render)
● Wartości w this.state nie mogą być funkcjami
● Powinien zawierać tylko wartości wykorzystywane w
render()