Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wprowadzenie do React

720 views

Published on

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

Published in: Software
  • Login to see the comments

Wprowadzenie do React

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

×