Wprowadzenie ReactJS #2 – State i Props

Komponenty w React JS operują na dwóch zbiorach danych – props, o których wspominałem już w poprzednim poście poświęconym React oraz state. W tym poście przyjrzymy im się bliżej i poznamy różnice między nimi.


Format wideo wpisu znajduję się na jego końcu


Props

Zacznijmy od przypomnienia czym są propsy, z poprzedniego wpisu wiemy, że są to dane przychodzące z zewnątrz do komponentu i są one przekazywane  przy jego tworzeniu . Np.

<ImageContainer image='react.png'/>

Wówczas za pomocą this.props.image możemy wewnątrz komponentu ImageContainer  dotrzeć do wartości react.png.

Drugą niezmiernie istotną rzeczą odnośnie do propsów jest to, że są niemodyfikowalne. Gdybyśmy w metodzie render() dorzucili taki kawałek kodu

render() {

    this.props.image = 'nowyPlik.png';

    return (
        <img src={this.props.image} width='120' height='120' alt='Obrazek'/>
    );
}

To zostaniemy przykładnie ukarani przy próbie odpalenia strony

TypeError: Cannot assign to read only property ‚image’ of object ‚#<Object>’

Więc wartości z propsów są tylko do odczytu, możemy więc co najwyżej skopiować wartość danego props i przypisać ją do nowej zmiennej.

const img = this.props.image;

State

State jak sama nazwa wskazuję jest to stan komponentu, czyli lokalne wartości dla danego egzemplarza komponentu – odpowiednik pól w obiektach z Javy czy innego języka obiektowego.

Stan, podobnie jak props, jest obiektem, z tą różnicą, że o ile propertisy przychodzą do nas już gotowe, to o stan musimy zadbać sami, przyjęło się definiować go w konstruktorze komponentu.

class ImageContainer extends Component {

    constructor() {
        super();
        this.state = {
            width: 120,
            height: 120
        }
    }
    
    //...

}

Tworzymy nowy obiekt state, który ma dwie wartości – width i height.

Następnie możemy użyć stanu by, przy wyświetleniu obrazka. Nie będziemy podawać sztywnej wartości, lecz tą jaką mamy przechowywaną w zmiennej.  Przesyłamy ją podobnie jak miało to miejsce przy propsach – używając konstrukcji {...} z tą różnicą, że używamy obiektu this.state.

render() {
  return (
    <img src={this.props.image}  width={this.state.width} height={this.state.height} alt='Pierwszy obrazek'/>
  );
}

Po co nam stan i zmiana jego wartości

Możesz się zastanawiać (i słusznie) po co nam stan, skoro to samo dałoby nam zwykłe pole klasy.

Stan służy Reactowi jako zbiór wartości, których modyfikacja powoduje zmiane tego jak komponent wygląda, bądź jakie dane wyświetla i przerysowanie komponentu w przeglądarce (konkretnie w VirtualDOM, ale o tym innym razem).

Gdybyśmy rozmiar naszego komponentu zmienili w taki

this.state.width = 200

To React nie wywołałby ponownie metody render() by zmienić wygląd komponentu, bo skąd może biedak wiedzieć, że wartość stanu się zmieniła?

Dlatego do zmiany służy metoda this.setState(), która wymusza ponowne przerysowanie elementu. Na przykład do zmiany szerokości obrazka użyjemy  takiej konstrukcji

this.setState({width: 200}});

Jako argument do funkcji przesyłamy obiekt, w którym znajduję się para klucz-wartość dla wybranej zmiennej. Wystarczy podać wartość, którą chcemy zmienić, nie musimy przesyłać całego stanu. React będzie na tyle sprytny, że nadpiszę tylko wartości przesłane w argumencie,  reszta pozostanie bez zmian.

Jako, że setState()  wywołuję metodę render to pod żadnym pozorem nie należy używać setState() w jej wnętrzu, bo zapętlimy naszą aplikację 🙂

Podusmowanie

Propsy przychodzą do komponentu z zewnątrz, z komponentu nadrzędnego (w naszym wypadku App). Stan natomiast jest zbiorem wewnętrznych zmiennych komponentu, które odpowiadają za to, jak jest on wyświetlany w przeglądarce – jego zmiana powoduję przerysowanie komponentu.

Prop i State

Tutaj zakończymy temat stanu i propsów. W następnym odcinku obsłużymy eventy 🙂 Jeśli spodobał Ci się ten artykuł, proszę podziel się nim w swojej sieci społecznościowej, a może nawet zapisz się do mojego newslettera 🙂

Źródła projektu dostępne są na githubie

Zupełnie przypadkiem 🙂 jestem autorem kursu ReactJS, więc jeśli jesteś zainteresowany biblioteką React, a nie chce Ci się czekać na kolejne wpisy to serdecznie zapraszam 🙂

Jedna odpowiedź do “Wprowadzenie ReactJS #2 – State i Props”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *