React Native - State

Os componentes do React são gerenciados pelos dados dentro state e props. Neste capítulo, vamos falar sobrestate.

Diferença entre State e Props

a state é mutável enquanto propssão imutáveis. Isso significa questate pode ser atualizado no futuro, embora não seja possível atualizar adequadamente.

usando estado

Este é o nosso componente raiz. Estamos apenas importandoHome que será usado na maioria dos 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 o texto do emulador do estado como na imagem a seguir.

Atualização de estado

Como o estado é mutável, podemos atualizá-lo criando o deleteState função e chamá-lo usando o 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- Em todos os capítulos, usaremos a sintaxe de classe para componentes com estado (contêiner) e a sintaxe de função para componentes sem estado (apresentação). Aprenderemos mais sobre os componentes no próximo capítulo.

Também aprenderemos como usar a sintaxe da função para Home updateState. Você deve ter em mente que esta sintaxe usa o escopo léxico ethisa palavra-chave será associada ao objeto de ambiente (Classe). Isso às vezes leva a um comportamento inesperado.

A outra maneira de definir métodos é usar as funções EC5, mas, nesse caso, precisaremos vincular thismanualmente no construtor. Considere o seguinte exemplo para entender isso.

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