Índice

Conteúdo

State

State é a segunda peça do quebra cabeça de componentes React, basicamente o State é o que permite dinamicidade no React e o faz ser tão rápido. Se lembra lá na parte 1 que eu falei que o React era rápido porque ele não “recriava” a página Web inteira toda vez que havia uma alteração graças ao ShadowDOM? Bem, State é como alteramos o conteúdo de maneira super rápida!

O State é um objeto javascript imutável, isso quer dizer que não podemos o mudar (se tentar executar state = {}, vai dar erro), isto é, diretamente. Todo o componente React tem uma função chamada de setState() em que passamos um objeto que então se torna nosso novo State. Quando um State é alterado com a função setState(), o React usando o ShadowDOM altera apenas o necessário dentro da página Web, garantindo que o navegador não recrie coisas desnecessárias.

Usando o State

Para usar o State no React precisamos de duas coisas:

  1. Um componente que terá o State
  2. O definir em seu constructor
class Componente extends React.Component {
    constructor() {
        super()
        this.state = {
            numero: 1
        }
    }
}

Dentro do constructor do nosso componente, precisamos executar a função super() que executa funções importantes para um Componente React vindos da classe pai React.Component. E então nós definimos o valor da propriedade this.state, que está disponível em qualquer componente React. NOTA: se você não definir a “base” de um state no constructor de um componente (basicamente as propriedades que ele vai ter), o State não irá funcionar. exemplos de criação de State:

this.state = {
    usuarios: [],
    mostrarLikes: false
}

this.state = {
    likes: 30,
    retweets: 7,
    usuario: null
}

Atualizando o State

Após criar um State, para o atualizar você precisa da função setState() que pode ser usada em um evento de um botão por exemplo ou a partir de um LifeCycleMethod, que veremos mais a frente, um exemplo simples para entender States é o clássico Contador:

class Contador extends React.Component {
    constructor() {
        super()
        this.state = {
            numero: 1
        }
    }

    aumentarNumero() {
        this.setState({
            numero: this.state.numero + 1
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.numero}</h1>
                <br />
                <button onClick={() => this.aumentarNumero()}>Aumentar o número</button>
            </div>
        )
    }
}

Finalizando

Na próxima parte aprenderemos sobre o que significa criação de componentes declarativos