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
function
palabra 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
Component
clase 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