Introdução a React e JSX: State, Props e Function Component

Introdução a React e JSX: State, Props e Function Component

Continuando o exemplo anterior (http://www.desafiosdeti.com.br/react/introducao-a-react-e-jsx/) vamos mostrar como utilizar State, Props e Function Component do React.

State

State são dados privados e completamente controlado pelo componente. O estado de uma aplicação nada mais é que as informações armazenadas no nosso programa em um determinado tempo.

Na linha 4 é feita a declaração do State utilizando this.State e adicionando no bloco as variáveis os states. O método this.state() é responsável por atulizar o valor de um state e automaticamente o componente é renderizado com o novo valor do state.

No exemplo abaixo foi criado três states: name, contador e minutos. O state contador fica atualizando seu valor a cada 1 segundo (função setTimeout()), o state minutos atualiza seu valor quando o valor do state contador for maior ou igual a 10 (const incrementar).

class Tempo extends React.Component {
  constructor(props){
    super(props);
    this.state={
      contador: 0,
      minutos: 0,
      name: "Relógio"
    };
  }
  
  render(){
    const incrementar = () => {
      this.setState(
         function (state, props) {
          if (this.state.contador >= 10){
            zerar();
            incrementarMinuto();
          }  
          return({ contador: state.contador +1})
         })
    }
    
    const incrementarMinuto = () => {
      this.setState((state) => { 
        return {minutos: state.minutos +1}
      })
    };
    const zerar = () => {
      this.setState({ 
        contador: 0 
      })
    }
    setTimeout(incrementar , 1000);
    return (
      <div>
        <h1 class="my-title">{this.state.minutos}:{this.state.contador}</h1>
        <h2 class="my-title">{this.state.name}</h2>
      </div>
    );
  }
}

        
ReactDOM.render(<Tempo />,document.getElementById('app'));

Props

Props é uma abreviação de properties, ou propriedades, são informações que podem ser passadas para um componente. Pode ser uma string, um número, até mesmo uma função. Este valor pode então ser utilizado pelo componente que a recebe. Primeiro, passamos o dado que desejamos passar ao componente definindo-o como um atributo, onde o componente é utilizado. No exemplo abaixo foi criado um novo componente chamado Contador que recebe por Props as informações do State contador e minutos passados pelo componente Tempo.
class Tempo extends React.Component {
  constructor(props){
    super(props);
    this.state={
      segundos: 0,
      minutos: 0,
      name: "Relógio"
    };
  }
  
  render(){
    const incrementar = () => {
      this.setState(
         function (state, props) {
          if (this.state.segundos >= 59){
            zerar();
            incrementarMinuto();
          }  
          return({ segundos: state.segundos +1})
         })
    }
    
    const incrementarMinuto = () => {
      this.setState((state) => { 
        return {minutos: state.minutos +1}
      })
    };
    const zerar = () => {
      this.setState({ 
        segundos: 0 
      })
    }
    setTimeout(incrementar , 1000);
    return (
      <div>
        <h1 class="my-title">{this.state.minutos}:{this.state.segundos} </h1>
        <Contador minutos={this.state.minutos} segundos={this.state.segundos} />
        <h2 class="my-title">{this.state.name}</h2>
      </div>
    );
  }
}

class Contador extends React.Component{
  render(){
    return(
      <h1 class="my-title">{this.props.minutos}:{this.props.segundos}</h1>
    )
  }
}
        
ReactDOM.render(<Tempo />,document.getElementById('app'));

Functional Component

Perceba que o novo componente criado não utiliza nenhum state, desta forma, podemos transformá-lo em um Functional Component.

Para exemplificar, criamos um botão que tem a função de zerar o contador de segundos. Para isso criamos dois Functional Component, um pra mostrar o relógio e outro para mostrar o botão. Existem dois botões ‘Zerar’ um utilizando o Functional Component e o outro de forma direta.

Ele é uma função, mas perceba que não tem classe, o que o deixa muito mais simples. Essa é a primeira vantagem se comparado com a outra forma de criar componente, afinal é muito simples para saber o que há dentro dele. Outra coisa bacana é que ele é mais rápido, já que não tem todo aquele overload de classe. Ele é uma função pura, ou seja, é mais fácil de ser testado e a qualidade do código é maior. Outro ponto interessante é que não usamos o this, pois se temos uma função pura, não temos um estado interno. Ela também só depende das entradas, que são os props.

class Tempo extends React.Component {
  constructor(props){
    super(props);
    this.state={
      segundos: 0,
      minutos: 0,
      stop: false,
      name: "Relógio"
    };
  }
  
  zerarCronometro() {
      this.state.segundos = -1
      this.state.minutos = 0
   }
  
  pararTempo(){
    this.state.stop = true
  }
  render(){
    const incrementar = () => {
      this.setState(
         function (state, props) {
          if (this.state.segundos >= 59){
            zerar();
            incrementarMinuto();
          }  
          console.log(this.state.stop)
          if (this.state.stop == false){
            return({ 
              segundos: state.segundos +1
            })
         }
         })
    }
    const zerar = () => {
      this.setState({ 
        segundos: 0 
      })
    }
    const incrementarMinuto = () => {
      this.setState((state) => { 
        return {minutos: state.minutos +1}
      })
    };
    setTimeout(incrementar , 1000);
    return (
      <div>
        <Contador minutos={this.state.minutos} segundos={this.state.segundos} />
        <Botao onClick={() => this.zerarCronometro()} label={"Zerar"} /> 
        <Botao onClick={() => this.pararTempo()} label={"Parar"} /> 
        <Botao label={"Parcial"} />
        <h2 class="my-title">{this.state.name}</h2>
      </div>
    );
  }
}

const Botao = (props) => (
  <button onClick={props.onClick}>{props.label}</button>
)
      
const Contador = (props) => (
      <h1 class="my-title">{props.minutos}:{props.segundos}</h1>
 )
  
        
ReactDOM.render(<Tempo />,document.getElementById('app'));
Referências: http://felipegalvao.com.br/blog/2018/09/24/aprenda-react-componentes-state-e-props/

Deixe uma resposta

Specify Google Client ID and Secret in Super Socializer > Social Login section in admin panel for Google Login to work

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *