React - 이제 시작하세요

React podemos usar estados em componentes de classe e também em componentes funcionais através da API de Hooks.

React atualiza a interface semper que um estado é alterado, isso faz com que o componente seja renderizado novamente assim como seus filhos, porém devido a virtual DOM o React alterar apenas o que precisa ser modificado, assim tornando essas alterações performática na manipulação da DOM.

Exemplos serão usando componentes de função devido ser a forma mais utilizada.

Vamos ao exemplo para entender melhor:

...
const Counter = () => {

  let counter = 0;

  function handleClick(){
    counter++;
    console.log(counter);
  } 

  return (
   <>
      <div>
        Contador: {counter}
      </div>
      <button onClick={handleClick}>Incrementar</button>
   </>
  )
}

Aqui temos um componente que renderiza um contador, atribuimos um um botão para incrementar esse contador através do clique, porém ao clicar no botão você vai peceber que a variável é atualizada no console e o contador não atualiza em tela.
Isso ocorre porque o React는 신기술을 렌더링하거나 구성요소를 변환할 수 있도록 합니다.

Vamos ver como corrigir isso usando o hook useState() para manipular 또는 contador.

import React, { useState } from 'react'

const Counter = () => {
  const [counter, setCounter] = useState(0);

  // let counter = 0;

  function handleClick(){
   setCounter(counter + 1)
    console.log(counter);
  } 

  return (
   <>
      <div>
        Contador: {counter}
      </div>
      <button onClick={handleClick}>Incrementar</button>
   </>
  )
} 

Aqui substituimos a variável counter e usamos o state do React, o useState retorna um array onde o primeiro item e a variável que armazena o estado ( que pode ser de vários tipos, como string, número, array, objeto e etc) e o segundo é uma função que altera esse estado, dessa forma ao clicar no botão a interface será atualizada corrigindo o que ocoria anteriormente.

Você pode definir um valor inicial do estado na inicialização do useState(initialValue).

Não é possivel alterar o estado diretamente, você tem acesso ao valor anterior para gerar um estado atualizado.

Vamos 참가자는 useState를 사용합니다.

사용 상태를 후크로 사용하는 경우 정확한 가져오기를 통해 첫 번째 연결을 시작할 수 있습니다.

Dentro do componente Counter, estamos chamando useState passando 0 como valor inicial e usando a sintaxe de desestruturação.

Armazenamos os valores de array retornado por useState dentro das variáveis ​​counter e setCounter.

É uma convenção comum prefixar o nome da função usado para atualizar o estado com a palavra set como em setCounter.

Quando clicamos no botão de incremento, estamos definindo uma função handleClick e chamando a setCounter passando o valor do contador atualizado.

setCounter(카운터 + 1)를 사용하거나 증분할 때 사용하는 용기의 유형을 관찰하십시오.

Também é possivel passar uma função como paraâmentro do useState, essa função tem acesso ao valor anterior do estado, use quando o novo valor dependser da manipulação do último do estado.

...
useState((prevState) => prevState + 1)

A função que manipula o estado é assíncrona, é importante se atentar a isso para evitar comportamentos indesejados no uso do estado.

O uso de estados em React é o que dita as modificações na interface do usuário, semper que precisamos manipular algum dado que será exibido em tela ou alguma informação que possa alterar o estado da aplicação, seja aparência, cor, alterações de modo geral utilizamos esse 후크 API de Hook은 미래 이후에 사용할 수 없는 기능 이상으로 존재합니다.

Baseado no post - How State Works in React – Explained with Code Examples

Documentação Oficial - Estado e Ciclo de Vida

Veja também: | |

_{Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como insentivo no meus estudos de React criando outros posts pra fixação do aprendizado.}

나 시감 :)

Github |