Change language
Python.Engineering Wiki setstate em javascript

setstate em javascript

__del__ | __main__ Python module | array Python module | code Python module | COM PHP module | copy Python module | dis Python module | DOM PHP module | Ev PHP module | FFI PHP module | gc Python module | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | operator Python module | os Python module | PS PHP module | pty Python module | Python functions | re Python module | resource Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo

Acompanhar o status de um aplicativo é como um aplicativo de página única (SAP) registra as alterações e as relata ao usuário. Ao contrário de uma estrutura de modelo, visualização, controlador (MVC), o SAP não redireciona o usuário e, portanto, precisa de uma maneira de gerenciar as alterações futuras no lado do cliente. Para revisar as estruturas MVC, consulte este guia.

No React, os próprios componentes podem lidar com seu próprio estado e reaparecer de acordo. Isso é feito por meio de métodos de ciclo de vida, que são discutidos em profundidade aqui. Para os propósitos deste artigo, veremos como alterar estados usando setState.

Este guia pressupõe alguma familiaridade básica com o React. Para revisar ou aprender os conceitos básicos do React, este artigo lista alguns dos melhores recursos de aprendizado do React.

O que é o React setState?

O método setState do React é como mudar o estado de um componente com estabilidade. Existem algumas regras específicas para alterar o status no React.

  1. setState não pode ser chamado em um componente de classe. Os componentes da classe chamam o método construtor () e definem um estado inicial. Então podemos mudar o estado mais abaixo chamando setState.
    Existem dois tipos diferentes de componentes no React. É o componente funcional e o componente de classe. Para nossos propósitos, estamos falando apenas com os componentes da classe. Para uma visão mais detalhada deste     artigo sobre as diferenças entre componentes funcionais e de classe.
  2. Ao chamar apenas setState em um componente de classe, podemos nos referir diretamente ao próprio componente usando a palavra-chave this. Chamar this.setState() é uma prática recomendada e garante que seu código não seja interrompido.
  3. Não modifique o status diretamente. A mudança de estado direta não será registrada no React to Spawning. O objetivo principal da mudança de estado é acionar uma nova interpretação desse componente para refletir as alterações feitas ao usuário.

Agora vamos dar uma olhada na sintaxe no contexto dessas diretrizes.

Sintaxe setState React

Na primeira diretriz, você vê que só podemos usar setState dentro de um componente de classe. Por exemplo, digamos que você tenha um aplicativo de negócios e queira implementar um carrinho de compras. Poderíamos configurar um componente de classe chamado carrinho de compras. Este componente será responsável por gerenciar seu próprio status quando um usuário adicionar um item ao carrinho.

Ao dividir o código acima, declaramos o componente da classe Cart Como todos os componentes de classe, estendemos react .Component. Este é o padrão Sintaxe do React.

Como queremos conceder o estado a este painel, precisamos chamar o método construtor. Portanto, o construtor base é chamado com super (props). Você pode ver o construtor de base não chamado com nenhum adereço. A documentação oficial do React solicita que o método construtor base seja sempre chamado com props

Agora que fizemos a sintaxe React necessária para construir um componente de classe para manter o estado, estamos prontos para afetar nosso estado inicial. Esta é a única vez que podemos nos referir diretamente ao estado. Atribuir status por chamando this.state =. {ShoppingCart: []} nos permite definir o estado inicial de nosso carrinho para um array vazio <

h2> Exemplo de reação setState

na seção anterior, examinamos a sintaxe envolvida na declaração de um estado inicial. Uma vez que o estado é definido no método construtor, podemos renderizar normalmente:

Seu carrinho

); }} ReactDOM.render (, document.getElementById (`root`));

Aqui temos um componente de classe com seu estado inicial definido cesta e exibe a cesta na declaração de retorno do método render. Vamos ver como podemos usar setState para atualizar nosso carrinho.

Definimos uma função que adicionará um novo item ao nosso carrinho mantendo os itens adicionados anteriormente. use o operador JavaScript difusão (.. .) para fazer uma cópia do estado inicial e atualizá-lo com o novo estado. Dessa forma, o basket conterá todos os elementos adicionados.

a função addItem pode ser usada no atributo onClick React de um botão se quisermos que o usuário possa adicionar este item quando um botão clica . Para nossos propósitos, veja Como usar setState em parte de uma função é suficiente cient.

Este artigo pretende ser uma introdução para entender como usar setState e não é de forma alguma exaustivo.

Conclusão

Neste artigo, temos aprendi o que é setState, orientações sobre como usá-lo, sintaxe e um pequeno exemplo. Isso deve ser uma base de artigo para incentivá-lo a se aprofundar e a prática de atualizar um estado dos componentes que você

documentação oficial do React contém exemplos adicionais que fornecerão mais oportunidades de prática. Lembre-se - você que na aplicação de uma única página, acompanhar o status de um componente é essencial para fazer alterações no usuário.