What is the difference between Function and Class in React?

Question

I’m studying React now and I’m having a little doubt. What’s the difference between the two? From what I’ve seen, they both do the same thing.

Answer 1

It seems to me that your question is not specific to React, but in general to the Javascript language. Anyway, I will explain the two cases.

(1) In the case of own language

Before the Ecmascript 2015 (also called "ES6"), there was no construction of class in Javascript.

The keyword class was added in ES6, allowing you to define Javascript classes. But in fact it is nothing more, nothing less than a syntactic sugar for the old Function, as the example below demonstrates:

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

(2) In the case of the React library

In React you can define a component using a function or a class.

(a) functional component without state

The simplest way to define a React component is by using a function. A component defined in this way does not maintain state ("state") nor contain life cycle methods ("Lifecycle methods"). Follow the example:

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

I used an arrow/arrow function ("Arrow Function") above, but could also have used the old one function(props) {}. The value returned by the function defines the model (view) of the component.

(b) class component

Another more sophisticated way to build an React component is by using an ES6 class. Note that before ES6, the staff used React.createClass() because there were no classes. Follow an example:

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

Note that a class component needs the method render(), which defines the component model. Class components allow you to define a state to store information, accessible via this.state. You can also define life cycle components in class components (e. g. componentDidMount()). Follow an example of a counter:

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>
    );
  }
}

The above example shows a button whose text contains a counter starting from scratch. Each time you click the button, the count increases by 1.