Status do Javascript

| | | | | | | | |

Você já ouviu falar de State na biblioteca React JavaScript, mas não sabe como usá-lo? Estado refere-se à "forma como cada objeto aparece em uma página da web". " O conceito é simples - é uma coleção de dados sobre o estado atual do componente, que pode ser alterado modificando os dados descritos. Sempre que os dados mudam, eles são exibidos novamente na tela do computador. A parte mais difícil da condição é saber como e quando usá-lo. Mas não se preocupe porque este tutorial explica como o estado é usado.

Para dar uma visão geral rápida, para definir o estado inicial, você usa this.state em um construtor JavaScript. Para atualizar o estado, use o método setState. Falaremos mais sobre estado e formas de usar estado neste tutorial.

O que é React State?

React state é um objeto com um conjunto de propriedades designadas para um componente e isso ajuda na forma como o componente é renderizado.Um componente com state é chamado de stateful. Você geralmente usa se um componente precisar rastrear informações sobre ele entre as marcas.

Um exemplo seria um componente de botão "curtir" que precisa acompanhar o número ber de vezes que clica. Isso deve reaparecer na tela toda vez que o botão for pressionado, como se para exibir o número atualizado de curtidas. E para isso, temos que ter certeza de que o botão como componente segue a informação, em vez de repetir a informação que codificamos várias vezes. Afinal, você não quer perder essas pessoas.

Os dados de estado de um componente podem ser acessados via this.state e editados usando o .setState método. O estado é privado porque não pode ser alterado pelo componente que contém o estado

Muitas pessoas confundem estado com acessórios, outro objeto da reação, mas há importantes diferenças entre os dois. Uma delas é que o estado é dinâmico, o que significa que os dados que ele contém podem mudar e assim afetar o comportamento do componente. Os adereços, por outro lado, são imutáveis, o que significa que "seu estado não pode mudar depois de construído."

Sintaxe do estado do React

o estado é definido inicialmente na função chamada constructor. o estado pode mudar, queremos garantir que há um valor atual inicial. O formato geral para definir o status é:

Por exemplo , se você estiver criando um componente de cronômetro , defina o estado inicial como this.state = {0} segundos:. Você sabe que um cronômetro mudará seu estado a cada segundo, mas ele precisa começar a contar em algum lugar. O componente que você codifica é chamado de "this". Essa instrução altera o estado do componente definindo um de seus atributos ("segundos") para ser igual ao valor escolhido (neste caso, "0") para set.

Aqui está um registro de componente chamado "pessoa" de uma amostra. Adicionaremos quatro valores ‚Äã‚Äã- nome, ocupação, cabelo e idade - ao objeto de estado no componente:

p>

// importação básica da instrução React

// componentes que chamamos de "Person", com propriedades do estado definidas no construtor:

// Uma função de renderização que define o que será exibido na tela:

pessoa

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

A última linha indica que o código passará pelo seu documento HTML e procurará o elemento que tem o id "root", e fará o que você instruiu no render () método acima. É por isso que você deve adicionar o seguinte ao corpo do documento do seu arquivo index.html:

Esta tag HTML tem o atributo ID inteiro em "root". É aqui que tudo o que você pediu ao componente para renderizar irá.

Você pode fazer referência ao objeto de estado digitando this.state.attributeName. Isso substituirá "attributename" pelos atributos definidos.

Aqui está um exemplo que usa as propriedades que definimos anteriormente para criar o estado do nosso componente "Person" . Usaremos o formulário {} this.state.attribute para chamar o valor do atributo do componente no qual estamos escrevendo nosso código.

Neste caso, copiaremos o seguinte método em nosso componente "person", que será isso que "aquilo" se refere. A tela exibe o valor pertencente ao atributo que escrevemos. Substitua a declaração render() do nosso componente "Person" no último exemplo por esta:

{this.state.name}

{{this.state.name} é isso. state.occupation} e é {} this.state.age years Atualmente seu cabelo é {this.state.hair}

) .. }

A tela exibe um cabeçalho com o valor do atributo "name", que é Tom Hiddleston. Abaixo , este será um parágrafo que afirma: "Tom Hiddleston é um ator e ele tem 40 anos". O cabelo dela é preto. "

O

.setState () usa this.setState() para atualizar os valores de um objeto de status. Este método recebe um argumento, que ser um novo atributo e seu valor: {attribute: "new value" }. métodos são usados para fazer isso porque o React chamará o método render nos bastidores para que seu novo conteúdo seja sempre exibido.

Aqui está um exemplo usando nosso componente "person" de antes. Adicione o código a seguir ao componente de código "person" que vimos no início do artigo.

  1. Adicione uma função de modificação de ocupação para "pessoa" na classe do corpo. Esta função chamará o método .setState. o atributo escrito aqui é o atributo de ocupação e nós escrevemos o valor que queremos alterar. lembrete "pessoa " código do componente que o trabalho é atualmente
    job = () => {this.setState ({occupation "model"});} "actor".
  2. Insira o seguinte código-chave dentro do método principal .render() a>

    vários .setState() não são processados em ordem, então isso pode apresentar mais sobre estes - conflito que você deve estar ciente . Isso é importante porque seu código está superando big e há mais linhas e mais estados escritos em React, você tem que pensar em como eles funcionam juntos. Isso pode ser difícil de fazer, especialmente com React sendo assíncrono por natureza, onde você não pode prever quem está controlando seus métodos setstate indo para ser processado.

    Você tem que usar state?

    A resposta é simples: não, você não deveria. Existem dois tipos principais de componentes: React components funcionais e class Componentes sem estado são componentes funcionais. Por engano não havia estado em um componente - você tem que criá-lo você mesmo

    Sem estado, no entanto, sua aplicação não será muito interativa .. Mesmo se você optar por configurar trabalho de estado , é aconselhável não ser excessivamente zeloso em usá-lo, pois o uso excessivo de estado em componentes pode dificultam a previsão de possíveis conflitos devido à complexidade.

    Conclusão

    State e Props são dois objetos importantes a serem lembrados ao usar o React. State rastreia o estado atual de um componente conforme ele é alterado com base em dados atualizados que definem um estado. Os acessórios, por outro lado, não mudam. Uma regra prática simples que deve ser usada é perguntar: "Os atributos deste componente estão sendo alterados a qualquer momento?" ". Se a resposta for "sim", você deve usar a categoria de status, pois Props é imutável.

    Antes de mergulhar totalmente em React , certifique-se de estar familiarizado com JavaScript ES6, como React VERSÁTIL de suas funções, como funções de direção, classes e tipos de variáveis. Além disso, foram feitas alterações no uso do React no que diz respeito ao estado e outras funções sem ter que escrever uma classe no recente dia do lançamento React, ganchos de reação .

    Status do Javascript __del__: Questions

    Status do Javascript __dict__: Questions

    Shop

    Best Python online courses for 2022

    $

    Best laptop for Fortnite

    $

    Best laptop for Excel

    $

    Best laptop for Solidworks

    $

    Best laptop for Roblox

    $

    Best computer for crypto mining

    $

    Best laptop for Sims 4

    $

    Best laptop for Zoom

    $499

    Latest questions

    NUMPYNUMPY

    psycopg2: insert multiple rows with one query

    12 answers

    NUMPYNUMPY

    How to convert Nonetype to int or string?

    12 answers

    NUMPYNUMPY

    How to specify multiple return types using type-hints

    12 answers

    NUMPYNUMPY

    Javascript Error: IPython is not defined in JupyterLab

    12 answers

    Wiki

    Python OpenCV | cv2.putText () method

    numpy.arctan2 () in Python

    Python | os.path.realpath () method

    Python OpenCV | cv2.circle () method

    Python OpenCV cv2.cvtColor () method

    Python - Move item to the end of the list

    time.perf_counter () function in Python

    Check if one list is a subset of another in Python

    Python os.path.join () method