Wprowadzenie do React

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


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


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


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


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


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


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


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


render()

Zachowuje się dokładnie tak samo jak w przypadku pierwszego wywołania ;)

Aktualizacja


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


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!

Software

Wprowadzenie do React