Manter ou não manter o estado?

E ae galera, beleza?

Esse fim de semana foi extremamente corrido, por isso não consegui escrever para o nosso blog no sábado como é de costume. Mas não vou deixar de postar por isso.

Hoje vou voltar a falar do React, vou falar hoje de algo fundamental para compreensão do uso dessa lib. O estado para o React é o responsável pelo dinamismo dos componentes.

Vou mostrar e falar um pouco do state para vocês. No post passado quando falamos de props, vocês lembram que diversas vezes usamos o this.props, para pegar a propriedade de um componente? Com o state é bem semelhante. Para capturar o estado de um componente, usamos o this.state.

Mas o que é o estado da aplicação? O estado é tudo aquilo que muda na sua aplicação e esse estado é gerenciado pelo componente statefull, se ele não tiver estado ele será stateless, falarei desses conceitos em breve para ficar mais claro.

Sempre que algo novo for ser renderizado no browser, houve uma mudança de estado, e esse componente responsável por essa mudança é um componente statefull. Para ele pode manipular esse estato é necessário que o componente estenda o Component do React.

Vamos mostrar um exemplo bem simples da modificação de estado.

Captura de Tela 2018-03-26 às 8.26.07 AM

Utilizando o mesmo arquivo do exemplo passado. Eu apaguei todo o conteúdo anterior e coloquei apenas um texto que será manipulado. O texto que ser manipulado é a linha 15. Como assim? O texto está na linha 15, mas a string está na linha 8?!

Vamos por partes. Nessa classe existem umas coisas novas. Vou falar de cada uma delas com calma. na linha 4 criamos um constructor, que será responsável por construir os nossos estados iniciais. Nele passamos o super e o estado inicial(this.state). Na linha 15 vamos apresentar o estado inicial do nosso texto, que a string ‘Trilha Front end’ e nela será rendedizadas as modificações. Uma coisa que é importante falar, precisamos passar o super, pois ele é o cara responsável por trazer os métodos e funções do Component do React. Sem ele a nossa aplicação não roda.

Vamos seguir?

Vamos adicionar um evento de click para fazer a mudança de estado de nossa aplicação.

Captura de Tela 2018-03-26 às 8.35.53 AM

O evento de click no React é feito inline mesmo, chamando o onClick. Esse método será responsável por executar uma função que vai modificar o estado da aplicação. Para fazer essa modificação temos que chamar o setState, pois só ele será o responsável por modificar o estado inicial do nosso componente. Não é possível modificar algo diretamente pelo state, como por exemplo passar um this.state e um novo valor para esse objeto. O React não aceita esse tipo de comportamento, pois o estado de uma aplicação é imutável. Mas passando o novo valor pelo setState a mágica acontece. Vamos ver como fica no browser?

Captura de Tela 2018-03-26 às 8.41.03 AM
Antes do clique.
Captura de Tela 2018-03-26 às 8.41.42 AM
Depois do clique.

Esse é um exemplo bem simples de como trabalhamos com estado no React. Claro que isso foi apenas um introdução bem simples, para vocês compreenderem o que é o state de uma aplicação.

Em breve vou trazer uma série de exercícios de React também. Junto com uma série de post ensinando a fazer uma aplicação simples em React.

Por hoje é só… Abraços galera!!!

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s