React Native - État

Les composants React sont gérés par les données à l'intérieur state et props. Dans ce chapitre, nous parlerons destate.

Différence entre l'état et les accessoires

la state est mutable tant que propssont immuables. Cela signifie questate peut être mis à jour dans le futur alors que le bon ne peut pas être mis à jour.

en utilisant l'état

C'est notre composante racines. Nous importons justeHome qui sera utilisé dans la plupart des chapitres.

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>
      );
   }
}

Nous pouvons voir le texte de l'émulateur de l'état comme dans la capture d'écran suivante.

Mise à jour de l'état

Puisque l'état est mutable, nous pouvons le mettre à jour en créant le deleteState et appelez-la en utilisant la onPress = {this.deleteText} un événement.

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- Dans tous les chapitres, nous utiliserons la syntaxe de classe pour les composants avec état (conteneur) et la syntaxe de fonction pour les composants sans état (présentation). Nous en apprendrons plus sur les composants dans le prochain chapitre.

Nous allons également apprendre à utiliser la syntaxe des fonctions pour Home updateState. Vous devez garder à l'esprit que cette syntaxe utilise la portée lexicale etthisLe mot-clé sera lié à l'objet d'environnement (Classe). Cela conduira parfois à un comportement inattendu.

L'autre façon de définir des méthodes est d'utiliser les fonctions EC5 mais dans ce cas nous devrons lier thismanuellement dans le constructeur. Prenons l'exemple suivant pour comprendre cela.

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