Componentes funcionales frente a componentes de clase en React

Hay principalmente dos componentes en React:

  • Componentes funcionales
  • Componentes de clase

Componentes funcionales

  • Los componentes funcionales son funciones básicas de JavaScript. Suelen ser funciones de flecha, pero también se pueden crear con la functionpalabra clave normal .
  • A veces se los denomina componentes "tontos" o "sin estado", ya que simplemente aceptan datos y los muestran de alguna forma; es decir, son los principales responsables de renderizar la interfaz de usuario.
  • Los métodos del ciclo de vida de React (por ejemplo, componentDidMount) no se pueden utilizar en componentes funcionales.
  • No se utiliza ningún método de renderizado en componentes funcionales.
  • Estos son principalmente responsables de la interfaz de usuario y, por lo general, son solo de presentación (por ejemplo, un componente de botón).
  • Los componentes funcionales pueden aceptar y utilizar accesorios.
  • Se deben favorecer los componentes funcionales si no necesita hacer uso del estado React.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Componentes de clase

  • Los componentes de clase hacen uso de la clase ES6 y amplían la Componentclase en React.
  • A veces se denominan componentes "inteligentes" o "con estado", ya que tienden a implementar lógica y estado.
  • Los métodos del ciclo de vida de React se pueden usar dentro de los componentes de la clase (por ejemplo, componentDidMount).
  • Pasas los accesorios a los componentes de la clase y accedes a ellos con this.props
import React, { Component } from "react"; class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } } render() { return ( 

Hello Person

); } } export default Person;

Más información

  • Reaccionar componentes
  • Componentes funcionales frente a componentes de clase
  • Componentes funcionales con estado y sin estado en React
  • Estado y ciclo de vida