3.6 KiB
| title | localeTitle |
|---|---|
| State | Estado |
Estado
Estado é o local de origem dos dados.
Devemos sempre tentar tornar nosso estado o mais simples possível e minimizar o número de componentes com estado. Se tivermos, por exemplo, dez componentes que precisam de dados do estado, devemos criar um componente de contêiner que manterá o estado para todos eles.
Estado é basicamente como um objeto global que está disponível em todos os lugares em um componente.
Exemplo de um componente de classe com estado:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
// We declare the state as shown below
this.state = {
x: "This is x from state",
y: "This is y from state"
}
}
render() {
return (
<div>
<h1>{this.state.x}</h1>
<h2>{this.state.y}</h2>
</div>
);
}
}
export default App;
Outro exemplo:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
// We declare the state as shown below
this.state = {
x: "This is x from state",
y: "This is y from state"
}
}
render() {
let x1 = this.state.x;
let y1 = this.state.y;
return (
<div>
<h1>{x1}</h1>
<h2>{y1}</h2>
</div>
);
}
}
export default App;
Estado de atualização
Você pode alterar os dados armazenados no estado de seu aplicativo usando o método setState em seu componente.
this.setState({ value: 1 });
Tenha em mente que setState é assíncrono, portanto, você deve ter cuidado ao usar o estado atual para definir um novo estado. Um bom exemplo disso seria se você quiser incrementar um valor em seu estado.
O caminho errado
this.setState({ value: this.state.value + 1 });
Isso pode levar a um comportamento inesperado no seu aplicativo se o código acima for chamado várias vezes no mesmo ciclo de atualização. Para evitar isso, você pode passar uma função de retorno de chamada do atualizador para setState vez de um objeto.
O caminho certo
this.setState(prevState => ({ value: prevState.value + 1 }));
Estado de atualização
Você pode alterar os dados armazenados no estado de seu aplicativo usando o método setState em seu componente.
this.setState({value: 1});
Tenha em mente que setState pode ser assíncrono, portanto, você deve ser cuidadoso ao usar o estado atual para definir um novo estado. Um bom exemplo disso seria se você quiser incrementar um valor em seu estado.
O caminho errado
this.setState({value: this.state.value + 1});
Isso pode levar a um comportamento inesperado no seu aplicativo se o código acima for chamado várias vezes no mesmo ciclo de atualização. Para evitar isso, você pode passar uma função de retorno de chamada do atualizador para setState vez de um objeto.
O caminho certo
this.setState(prevState => ({value: prevState.value + 1}));
A maneira mais limpa
this.setState(({ value }) => ({ value: value + 1 }));
Quando apenas um número limitado de campos no objeto de estado é necessário, a destruição de objetos pode ser usada para códigos mais limpos.