React Native - Stato

I componenti React sono gestiti dai dati all'interno state e props. In questo capitolo parleremo distate.

Differenza tra stato e oggetti di scena

il state è mutevole mentre propssono immutabili. Ciò significa chestate può essere aggiornato in futuro mentre il corretto non può essere aggiornato.

utilizzando State

Questa è la nostra componente delle radici. Stiamo solo importandoHome che verrà utilizzato nella maggior parte dei capitoli.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
      <View>
         <Text> {this.state.myState} </Text>
      </View>
      );
   }
}

Possiamo vedere il testo dell'emulatore dallo stato come nello screenshot seguente.

Aggiornamento dello stato

Poiché lo stato è mutabile, possiamo aggiornarlo creando il file deleteState e chiamala usando la onPress = {this.deleteText} evento.

Home.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

NOTES- In tutti i capitoli, useremo la sintassi della classe per i componenti con stato (contenitore) e la sintassi della funzione per i componenti senza stato (di presentazione). Impareremo di più sui componenti nel prossimo capitolo.

Impareremo anche come utilizzare la sintassi della funzione per Home updateState. Tieni presente che questa sintassi utilizza l'ambito lessicale ethisla parola chiave verrà associata all'oggetto ambiente (Classe). Questo a volte porterà a comportamenti inaspettati.

L'altro modo per definire i metodi è usare le funzioni EC5 ma in tal caso avremo bisogno di eseguire il binding thismanualmente nel costruttore. Considera il seguente esempio per capirlo.

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}