No exemplo anterior vimos o "props", capaz de armazenar propriedades que podem ser compartilhadas entre os componentes, e hoje veremos o "state", ambos são parecidos, porém o "state" é privado e controlado integralmente pelo componente. Também veremos eventos que serão capazes de alterar o estado de nosso componente assim como veremos como se comporta o ciclo de vida de um componente.
State
Como já foi dito, o "state" é privado e pertence ao componente, ele também possui outras peculiaridades:
Modificando o estado
Só é permitida a atribuição no construtor da classe, logo a única forma de alterar um valor no estado é por meio do método "setState", abaixo exemplo de atribuição no construtor e de alteração em um método chamado "alterarEstado":
cosntructor(props) {
super(props);
this.state = { nome: 'Adamastor'};
}
alterarEstado(novoNome) {
this.setState({
nome: novoNome
});
}
Atualizações assíncronas
Como um valor em "props" ou em "state" pode ser assíncrono, caso seja necessário usar seus valores para atualizar o estado devemos faze-lo por meio de uma variação do "setState", que aceita uma função:
this.setState((state, props) => ({
nome: state.nome,
salario: props.salario
}));
Atualizações mescladas
Se o estado possuir várias propriedades, podemos atualiza-las de forma separada e em momentos distintos:
cosntructor(props) {
super(props);
this.state = {
pessoas: [],
compras: []
};
}
preencherPessoas(pessoasDoCadastro) {
this.setState({
pessoas: pessoasDoCadastro
});
}
preencherCompras(comprasRealizadas) {
this.setState({
compras: comprasRealizadas
});
}
Fluxo unidirecional
Podemos considerar a árvore de componentes como uma cascata, o estado de cada componente é uma fonte de água adicional unida em um ponto arbitrário cujo fluxo continua a fluir para baixo. Isso quer dizer que se tivermos um componente pai e outro filho (dentro de pai), podemos passar o estado do pai para o filho, mas não o contrário.
O componente "detalhes de entrega" será usado pelo componente "produto" que passará um de seus valores de estado como uma propriedade, desse modo exemplificaremos um exemplo de uso de estado, com sua criação e atualização e mostraremos um exemplo de compartilhamento de estado de um pai para um filho (fluxo de dados top-down)
Na classe "Produto" a criação do estado, sua atualização e a passagem do estado ao componente filho:
Na classe "DetalheEntrega" o uso da propriedade recebida:
Projeto completo aqui.
Exemplo
No projeto de exemplo criaremos dois componentes, "produto" e "detalhes de entrega", onde no componente "produto" teremos as informações referentes a nome e quantidade, onde a quantidade poderá ser incrementada por meio de um botão, o componente "detalhes de entrega" mostra o nome do produto e detalhes da entrega.O componente "detalhes de entrega" será usado pelo componente "produto" que passará um de seus valores de estado como uma propriedade, desse modo exemplificaremos um exemplo de uso de estado, com sua criação e atualização e mostraremos um exemplo de compartilhamento de estado de um pai para um filho (fluxo de dados top-down)
Na classe "Produto" a criação do estado, sua atualização e a passagem do estado ao componente filho:
constructor(props) {
super(props);
this.state = {
nome: 'Jogo',
quantidade: 1
}
this.adicionarProduto = this.adicionarProduto.bind(this);
}
adicionarProduto() {
this.setState((state) => ({
quantidade: state.quantidade + 1
}));
}
...
<DetalheEntrega produto={this.state.nome}></DetalheEntrega>
Na classe "DetalheEntrega" o uso da propriedade recebida:
constructor(props) {
super(props);
this.state = {
produto: props.produto,
detalhes: 'Será entregue na rua das flores'
}
}
render() {
return (
<div>
<p>Entrega de {this.state.produto}</p>
Detalhes: {this.state.detalhes}
</div>
);
}
Projeto completo aqui.
Comentários
Postar um comentário
Obrigado por Participar do programero, fique a vontade para agradecer, retificar, perguntar ou sugerir.