Читать книгу React Native w akcji - Nader Dabit - Страница 54
Оглавление2
Tematyka rozdziału:
■ jak działa stan (state) i dlaczego jest on ważny,
■ działania właściwości (props) i dlaczego są one ważne,
■ zrozumienie specyfikacji komponentu React,
■ wdrażanie metod cyklu życia React.
Skoro podstawy mamy już za sobą, czas zająć się kilkoma innymi fundamentalnymi elementami, które składają się na React i React Native. Omówimy sposób zarządzania stanem i danymi oraz przekazywanie danych wewnątrz aplikacji. Wejdziemy także głębiej, pokazując, jak przekazywać właściwości między komponentami oraz jak operować na tych właściwościach od góry do dołu.
Gdy zdobędziemy wiedzę na temat stanu i właściwości, wejdziemy głębiej i zajmiemy się korzystaniem z wbudowanych metod cyklu życia React. Te metody pozwalają wykonywać określone czynności podczas tworzenia lub niszczenia komponentu. Ich poznanie jest kluczem do zrozumienia, jak działa React i React Native oraz jak w pełni wykorzystać framework. Metody cyklu życia są również koncepcyjnie największą częścią React i React Native.
UWAGA W tym rozdziale zobaczymy odniesienia zarówno do React, jak i React Native. Należy pamiętać, że kiedy będę wspominał o React, to nie będę mówił o rzeczach specyficznych dla React Native, ale o koncepcjach związanych zarówno z React, jak i React Native. Na przykład stan i właściwości działają tak samo w React i React Native, podobnie jak cykl życia i specyfikacje komponentów React.
2.1. Zarządzanie danymi komponentów przy użyciu stanu
Jednym ze sposobów tworzenia i zarządzania danymi w komponentach React lub React Native jest użycie stanu. Stan komponentu jest deklarowany podczas jego tworzenia, a jego struktura jest zwykłym obiektem JavaScriptu. Stan można aktualizować w komponencie za pomocą funkcji o nazwie setState, którą omówimy wkrótce.
Innym sposobem przetwarzania danych jest użycie właściwości. Właściwości są przekazywane jako parametry podczas tworzenia komponentu, lecz w przeciwieństwie do stanu nie można ich aktualizować w ramach komponentu.
2.1.1. Poprawne operowanie stanem komponentu
Stan to zbiór wartości zarządzanych przez komponent. React traktuje interfejsy użytkownika jako proste maszyny stanowe. Kiedy stan komponentu zmienia się za pomocą funkcji setState, React ponownie go renderuje. Jeśli jakieś elementy potomne dziedziczą ten stan jako właściwości, wówczas wszystkie elementy potomne również są ponownie generowane.
Podczas budowania aplikacji przy użyciu React Native zrozumienie, jak działa stanowość, ma fundamentalne znaczenie, ponieważ określa to sposób wyświetlania i zachowania komponentów stanowych. Stan komponentu pozwala tworzyć komponenty dynamiczne i interaktywne. Najważniejszą kwestią do zrozumienia przy rozróżnianiu stanu i właściwości jest to, że stan jest mutowalny, podczas gdy właściwości są niemutowalne.
Podczas tworzenia komponentu stan jest inicjowany w konstruktorze lub przez inicjalizatora właściwości. Po zainicjowaniu stanu jest on dostępny w komponencie jako this.state. Poniższy listing pokazuje przykład.
Listing 2.1. Ustawienie stanu za pomocą inicjalizatora właściwości
import React from 'react'
class MyComponent extends React.Component {
state = {
year: 2016,
name: 'Nader Dabit',
colors: ['blue']
}
render() {
return (
<View>
<Text>My name is: { this.state.name }</Text>
<Text>The year is: { this.state.year }</Text>
<Text>My colors are { this.state.colors[0] }</Text>
</View>
)
}
}
Funkcja constructor jest wywoływana w momencie tworzenia instancji klasy JavaScriptu, jak pokazano na następnym listingu. To nie jest metoda cyklu życia React, ale zwykła metoda klasy JavaScriptu.
Listing 2.2. Ustawienie stanu za pomocą konstruktora
import React {Component} from 'react'
class MyComponent extends Component {
constructor(){
super()
this.state = {
year: 2016,
name: 'Nader Dabit',
colors: ['blue']
}
}
render() {
return (
<View>
<Text>My name is: { this.state.name }</Text>
<Text>The year is: { this.state.year }</Text>
<Text>My colors are { this.state.colors[0] }</Text>
</View>
)
}
}
Konstruktor i inicjalizator właściwości działają dokładnie tak samo, a stosowane podejście zależy od preferencji.
Stan można zaktualizować, wywołując this.setState(obiekt) i przekazując do tego obiekt o nowym stanie, którego chcemy użyć. setState scala poprzedni stan z bieżącym, zatem jeśli przekażemy tylko pojedynczy element (parę klucz-wartość), reszta stanu pozostanie taka sama, a zmieniany element w danym stanie zostanie nadpisany.
Przyjrzyjmy się, jak korzystać z setState (patrz listing 2.3). W tym celu wprowadzimy nową metodę – program obsługi dotknięcia o nazwie onPress. Można ją wywołać na kilku typach „reaktywnych” komponentów React Native, ale tutaj dołączymy ją do komponentu Text, aby rozpocząć od prostego przykładu. Po naciśnięciu tekstu wywołamy funkcję o nazwie updateYear, aby zaktualizować stan za pomocą setState. Ta funkcja zostanie zdefiniowana przed funkcją render, ponieważ zwykle dobrą praktyką jest definiowanie niestandardowych metod przed metodą render, aczkolwiek należy pamiętać, że kolejność definicji funkcji nie wpływa na rzeczywistą funkcjonalność.
Listing 2.3. Aktualizacja stanu
import React {Component} from 'react'
class MyComponent extends Component {
constructor(){
super()
this.state = {
year: 2016,
}
}
updateYear() {
this.setState({
year: 2017
})
}
render() {
return (
<View>
<Text
onPress={() => this.updateYear()}>
The year is: { this.state.year }
</Text>
</View>
)
}
}
Rysunek 2.1. Przepływ związany z setState, ze strzałkami wskazującymi, kiedy element tekstowy został wciśnięty. Stanowa właściwość year została zainicjowana w konstruktorze na 2016. Po każdym naciśnięciu tekstu właściwość year jest ustawiana na 2017
