O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Wprowadzenie do React

728 visualizações

Publicada em

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

Publicada em: Software
  • Entre para ver os comentários

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!

×