Introdução ao React - State - parte 6


O que é o State e como o usar?

Data: 09/03/2020
Categoria: dev

Indice

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
1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
7
8
9
10
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

Próxima parte