-1

eu estou estudando React agora e eu estou com uma pequena duvida. Qual a diferença entre os 2? Pelo o que eu vi, ambos fazem a mesma coisa.

1

1 Resposta 1

4

Me parece que sua pergunta não é específica para o React, mas em geral da linguagem do JavaScript. De qualquer forma, vou explicar os dois casos.

(1) No caso da linguagem própria

Antes do ECMAScript 2015 (também chamado "ES6"), não existia a construção de class no JavaScript.

A palavra-chave class foi adicionada no ES6, permitindo você definir classes em JavaScript. Mas na verdade não se trata nada mais, nada menos de um açúcar sintático para a velha Function, como o exemplo abaixo demonstra:

class Hello {}
Hello.constructor // => ƒ Function() { [native code] }

(2) No caso da biblioteca React

Em React você pode definir um componente usando uma função ou uma classe.

(a) componente funcional sem estado

A maneira mais simples de definir um componente de React é usando uma função. Um componente definido dessa maneira não mantém estado ("state") nem contém métodos de ciclo de vida ("lifecycle methods"). Segue o exemplo:

const Botao = (props) => {
  return (
    <button type="button">{props.children}</button>
  );
};

Usei uma função de flexa/seta ("arrow function") acima, mas também poderia ter usado a velha function(props) {}. O valor retornado pela função define o modelo (visão) do componente.

(b) componente de classe

Outra maneira mais sofisticada de construir um componente de React é usando uma classe de ES6. Note que antes do ES6, o pessoal usava React.createClass() porque não havia classes. Segue um exemplo:

class Botao extends React.Component {
  render() {
    return (
      <button type="button">{this.props.children}</button>
    );
  }
}

Note que um componente de classe precisa do método render(), que define o modelo do componente. Componentes de classe permitem que você defina um estado para armazenar informações, acessível via this.state. Você também pode definir componentes de ciclo de vida em componentes de classe (e.g. componentDidMount()). Segue um exemplo de um contador:

class Contador extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      contagem: 0,
    };

    this.onCounterClick = this.onCounterClick.bind(this);
  }

  onCounterClick() {
    this.setState({ contagem: this.state.contagem + 1 });
  }

  render() {
    return (
      <button type="button" onClick={this.onCounterClick}>Contagem: {this.state.contagem}</button>
    );
  }
}

O exemplo acima mostra um botão cujo texto contém um contador começando do zero. Cada vez que você clica o botão, a contagem aumenta por 1.

4
  • Obrigado nbk, por ter dedicado seu tempo. Consegui compreender ambos.
    – Jota
    28/03/2018 às 23:00
  • Uma dúvida, o que seria este super(props)?
    – Jota
    28/03/2018 às 23:03
  • @Jota é um conceito de programação orientada a objetos. A classe Contador deriva da classe base ("base class") chamada React.Component. No construtor, quando chama super(), ele chama o construtor da classe base React.Component. É recomendado pela doc. do React que sempre execute isso se você tiver um constructor() definido explicitamente. Ref reactjs.org/docs/react-component.html#constructor
    – nbkhope
    29/03/2018 às 1:01
  • (cont.) A razão é que se não passar props pro super(), o uso de this.props dentro do bloco do constructor() resulta em valor indefinido. É um pequeno detalhe, mas se você estiver curioso, tem essa discussão interessante em inglês: stackoverflow.com/questions/30571875/…
    – nbkhope
    29/03/2018 às 1:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .