Читать книгу React Native w akcji - Nader Dabit - Страница 13

Komponenty są elementami składowymi aplikacji React lub React Native. Punktem wejścia aplikacji jest komponent, który wymaga innych komponentów i z nich się składa. Te komponenty mogą również wymagać kolejnych komponentów i tak dalej.

Istnieją dwa główne typy komponentów React Native: stanowe (stateful) i bezstanowe (stateless). Oto przykład stanowego komponentu używającego klasy ES6:

class HelloWorld extends React.Component {

constructor() {

super()

this.state = { name: 'Chris' }

}

render () {

return (

<SomeComponent />

)

}

}

A teraz przykład komponentu bezstanowego:

const HelloWorld = () => (

<SomeComponent />

Główną różnicą jest to, że komponenty bezstanowe nie mogą być podłączone do żadnych metod związanych z cyklem życia i nie mają własnego stanu, zatem wszelkie przetwarzane dane muszą być pobierane jako właściwości (props). Metody związane z cyklem życia dokładniej omówimy w rozdziale 2, ale na razie rzućmy okiem na nie oraz na poniższą klasę.

Listing 1.1 Tworzenie prostej klasy React Native

<Text>{this.state.name}</Text>

</View>

)

}

const styles = StyleSheet.create({

container: {

marginTop: 100,

flex: 1

}

})

UWAGA Podczas omawiania powyższych metod należy pamiętać o koncepcji montowania (mounting). Kiedy tworzony jest komponent, powstaje instancja cyklu życia komponentu React, która wywołuje metody zastosowane na listingu 1.1.

Na początku pliku potrzebujemy deklaracji importu React z 'react' oraz View, Text i StyleSheet z 'react-native'. View jest najbardziej podstawowym elementem składowym do tworzenia komponentów React Native oraz w ogóle interfejsu użytkownika, dlatego można go traktować jak znacznik div w HTML. Text pozwala tworzyć elementy tekstowe i jest porównywalny ze znacznikiem span w HTML. StyleSheet pozwala tworzyć obiekty stylów do użycia w aplikacji. Te dwa pakiety (react i react-native) są dostępne jako moduły npm.

Gdy komponent jest ładowany po raz pierwszy, ustawiamy w konstruktorze obiekt state z właściwością name. Aby dane w aplikacji React Native były dynamiczne, należy je ustawić jako stanowe lub przekazać jako właściwości. W tym przypadku ustawiliśmy stan w konstruktorze, więc w razie potrzeby możemy go zmienić przez wywołanie

this.setState({

name: 'Some Other Name'

})

które ponownie wyrenderuje komponent. Ustawienie zmiennej jako stanowej pozwala zaktualizować wartość w innym miejscu komponentu.

Następnie jest wywoływany render: sprawdza właściwości i stan, a następnie musi zwrócić pojedynczy element React Native, null lub false. Jeśli będziemy mieli wiele elementów potomnych, to będą one musiały być opakowane w element nadrzędny. Tutaj komponenty, style oraz dane zostały połączone, aby utworzyć to, co zostanie wyrenderowane w interfejsie użytkownika.

Ostatnią metodą w cyklu życia jest componentDidMount. Jeśli byłoby potrzebne jakiekolwiek wywołanie API lub żądanie AJAX w celu zresetowania stanu, jest to zwykle najlepsze miejsce, aby to zrobić. Na koniec na urządzeniu jest renderowany interfejs użytkownika i dzięki temu można zobaczyć wynik.