React Native State

Existem dois tipos de dados que controlam um componente: props e state. props são definidos pelo pai e são corrigidos durante a vida útil de um componente. Para dados que vão mudar, temos que usar state.

Em geral, você deve inicializar state no construtor e chamar setState quando desejar alterá-lo.

Por exemplo, digamos que queremos criar texto que pisque o tempo todo. O próprio texto é definido uma vez quando o componente piscante é criado, portanto, o texto em si é a prop. O “se o texto está ativado ou desativado no momento” muda com o tempo, de modo que deve ser mantido state.

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

class Blink extends Component {

  componentDidMount(){
    // Toggle the state every second
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }

  //state object
  state = { isShowingText: true };

  render() {
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      <Text>{this.props.text}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

Em um aplicativo real, você provavelmente não definirá o estado com um timer. Você pode definir o estado quando tiver novos dados do servidor ou da entrada do usuário.

Você também pode usar um contêiner de estado como Redux ou Mobx para controlar seu fluxo de dados. Nesse caso, você usaria Redux ou Mobx para modificar seu estado, em vez de ligar setState diretamente.

Quando setState é chamado, o BlinkApp renderiza novamente seu componente. Ao chamar setState no Timer, o componente será renderizado novamente toda vez que o Timer funcionar.

O estado funciona da mesma maneira que no React, portanto, para obter mais detalhes sobre como lidar com o estado, você pode consultar a API React.Component .

Texto traduzido de https://facebook.github.io/react-native/docs/state