O React é uma das bibliotecas JavaScript mais populares para construção de interfaces de usuário. Com o React, é possível criar componentes reutilizáveis, que são como peças de lego que podem ser combinadas para formar interfaces complexas. No entanto, uma das maiores dificuldades no desenvolvimento com React é compartilhar dados entre componentes irmãos.
O conceito de elevação de estado (lifting state up) é uma das soluções mais comuns para compartilhar dados entre componentes irmãos no React. Neste artigo, vamos explicar o que é elevação de estado e como ela funciona.
O que é elevação de estado?
Elevação de estado é um padrão de design que consiste em mover o estado compartilhado entre componentes irmãos para um ancestral comum. Em outras palavras, ao invés de cada componente irmão ter seu próprio estado, o estado é mantido em um componente pai e passado para os componentes filhos como propriedades.
O objetivo da elevação de estado é simplificar a comunicação entre componentes irmãos e tornar o código mais fácil de entender e manter.
Como funciona a elevação de estado?
Para entender como a elevação de estado funciona, vamos considerar o exemplo de uma aplicação de carrinho de compras. Suponha que temos três componentes irmãos: um componente Carrinho que mostra os itens do carrinho, um componente ListaDeProdutos que lista os produtos disponíveis para compra e um componente ItemDeProduto que representa um item de produto na lista.
Inicialmente, cada componente tem seu próprio estado. O componente ListaDeProdutos mantém uma lista de produtos disponíveis, o componente ItemDeProduto mantém o estado do produto selecionado e o componente Carrinho mantém a lista de itens no carrinho.
No entanto, para que os componentes ListaDeProdutos e Carrinho possam interagir entre si, precisamos passar informações entre eles. Isso pode ser feito usando elevação de estado. Em vez de manter o estado do carrinho no componente Carrinho, podemos movê-lo para um componente pai comum, como o componente App.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
produtos: [
{id: 1, nome: "Camiseta", preco: 29.90},
{id: 2, nome: "Calça", preco: 59.90},
{id: 3, nome: "Tênis", preco: 99.90}
],
itensCarrinho: []
};
}
adicionarItemAoCarrinho = (produto) => {
this.setState(prevState => ({
itensCarrinho: [...prevState.itensCarrinho, produto]
}));
}
render() {
return (
<div>
<ListaDeProdutos
produtos={this.state.produtos}
adicionarItemAoCarrinho={this.adicionarItemAoCarrinho}
/>
<Carrinho itens={this.state.itensCarrinho} />
</div>
);
}
}
No exemplo acima, movemos o estado itensCarrinho do componente Carrinho para o componente
Top comments (0)