Diferencias entre componentes funcionales y componentes de clase en React

Cree una aplicación de contador que aumente la cantidad de conteos a medida que los usuarios hacen clic en el botón «Agregar» usando componentes funcionales y de clase.

Componentes funcionales: los componentes funcionales son algunos de los componentes más comunes que se encontrarán mientras se trabaja en React. Estas son simplemente funciones de JavaScript. Podemos crear un componente funcional para React escribiendo una función de JavaScript.

Sintaxis:

const Car=()=> {
  return <h2>Hi, I am also a Car!</h2>;
}

Ejemplo:

import React, { useState } from "react";
 
const FunctionalComponent=()=>{
    const [count, setCount] = useState(0);
 
    const increase = () => {
        setCount(count+1);
    }
 
    return (
        <div style={{margin:'50px'}}>
            <h1>Welcome to Geeks for Geeks </h1>
            <h3>Counter App using Functional Component : </h3>
          <h2>{count}</h2>
            <button onClick={increase}>Add</button>
        </div>
    )
} 
 
 
export default FunctionalComponent;

 Producción:

Componente de clase: este es el pan y la mantequilla de la mayoría de las aplicaciones web modernas creadas en ReactJS. Estos componentes son clases simples (compuestas por múltiples funciones que agregan funcionalidad a la aplicación).

Sintaxis:

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Ejemplo:

import React, { Component } from "react";
 
class ClassComponent extends React.Component{
    constructor(){
        super();
        this.state={
            count :0
        };
        this.increase=this.increase.bind(this);
    }
     
   increase(){
       this.setState({count : this.state.count +1});
   }
 
    render(){
        return (
            <div style={{margin:'50px'}}>
               <h1>Welcome to Geeks for Geeks </h1>
               <h3>Counter App using Class Component : </h3>
               <h2> {this.state.count}</h2> 
               <button onClick={this.increase}> Add</button>
 
            </div>
        )
    }
}
 
export default ClassComponent;

Producción:

Los ganchos son una nueva adición a React 16.8. Le permiten usar el estado y otras características de React sin escribir una clase.

En el ejemplo anterior, para los componentes funcionales, usamos ganchos (useState) para administrar el estado. Si escribe un componente de función y se da cuenta de que necesita agregarle algún estado, anteriormente tenía que convertirlo en un componente de clase. Ahora puede usar un gancho dentro del componente de función existente para administrar el estado y no es necesario convertirlo en el componente de clase. En lugar de clases, se pueden usar ganchos en el componente funcional, ya que es una forma mucho más fácil de administrar el estado. Los ganchos solo se pueden usar en componentes funcionales, no en componentes de clase.

Componentes funcionales frente a componentes de clase: