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

1. Wprowadzenie do React
Mariusz Dybciak
Full Stack Developer @ Brainhub

2. Czym jest React?
Biblioteka do tworzenia interfejsów użytkownika

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

4. Opis UI

5. Wersja tradycyjna

6. Wersja opcjonalna

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

8. Performance

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

12. Tworzenie komponentów

13. Cykl życia komponentu
Montowanie:
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()
Aktualizacja:
1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()
Odmontowywanie:
1. componentWillUnmount()

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

21. Cykl życia komponentu
render()
Zachowuje się dokładnie tak samo jak w przypadku
pierwszego wywołania ;)
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

23. Cykl życia komponentu
componentWillUnmount()
Kiedy?
bezpośrednio przed odmontowaniem komponentu
● Przydatny np. do odłączania event listenerów
Odmontowywanie

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()

26. this.setState({ stateName: newValue });

27. Data Flow

28. Dzięki!