wprowadzenie do react
TRANSCRIPT
Wprowadzenie do React
Mariusz DybciakFull Stack Developer @ Brainhub
Czym jest React?
Biblioteka do tworzenia interfejsów użytkownika
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
Opis UI
Wersja tradycyjna
Wersja opcjonalna
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
Performance
Tradycyjna optymalizacja
● Unikaj obciążających operacji na DOMie
● Minimalizuj dostęp do DOMa
● Unikaj modyfikowania templatek przy pomocy JSa
Co na to React?Renderuj wszystko przy każdej aktualizacji
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
Tworzenie komponentów
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()
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
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
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
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
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
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
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
Cykl życia komponentu
render()
Zachowuje się dokładnie tak samo jak w przypadku pierwszego wywołania ;)
Aktualizacja
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
Cykl życia komponentu
componentWillUnmount()
Kiedy? bezpośrednio przed odmontowaniem komponentu
● Przydatny np. do odłączania event listenerów
Odmontowywanie
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.
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()
this.setState({ stateName: newValue });
Data Flow
Dzięki!