Reaccionar nativo - Estado

Los componentes de React son administrados por los datos internos state y props. En este capítulo, hablaremos sobrestate.

Diferencia entre Estado y Props

la state es mutable mientras propsson inmutables. Esto significa questate se puede actualizar en el futuro, mientras que la adecuada no se puede actualizar.

usando el estado

Este es nuestro componente de raíces. Solo estamos importandoHome que se utilizará en la mayoría de los capítulos.

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

Podemos ver el texto del emulador del estado como en la siguiente captura de pantalla.

Actualización del estado

Dado que el estado es mutable, podemos actualizarlo creando el deleteState función y llámala 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- En todos los capítulos, usaremos la sintaxis de clase para componentes con estado (contenedor) y la sintaxis de función para componentes sin estado (presentación). Aprenderemos más sobre los componentes en el próximo capítulo.

También aprenderemos cómo usar la sintaxis de funciones para Inicio. updateState. Debe tener en cuenta que esta sintaxis usa el alcance léxico ythisLa palabra clave estará vinculada al objeto de entorno (Clase). A veces, esto dará lugar a un comportamiento inesperado.

La otra forma de definir métodos es usar las funciones EC5, pero en ese caso necesitaremos enlazar thismanualmente en el constructor. Considere el siguiente ejemplo para comprender esto.

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