Introducción: los componentes son los componentes básicos para crear interfaces de usuario en React. Nos permiten desarrollar partes reutilizables e independientes de componentes interconectados que juntos forman la interfaz web completa. React tiene 2 tipos diferentes de componentes:
Sintaxis:
Componente de clase : los componentes creados con la plantilla de clase ES2015 se conocen como componentes de clase.
class FirstComponent extends React.Component {
render() {
return <p>This is a class component!</p>;
}
}
Componente de función : los componentes creados con la sintaxis de función de JavaScript son componentes funcionales.
function anotherComponent(props) {
return <p>This is a function component!</p>;
}
Ahora que sabemos qué son los componentes, tratemos de entender cuándo debemos usar componentes de clase o de función. Necesitamos entender primero el concepto del estado del componente. Puede consultar este artículo para comprender mejor el estado React .
En el caso de los componentes de clase, cuando el estado del componente cambia, se llama al método render. Mientras que los componentes de función representan la interfaz cada vez que se cambian los accesorios.
Aunque deberíamos preferir usar componentes de función la mayoría de las veces, ya que React también permite usar el estado con componentes de función en React versión 16.8 y posteriores usando el enlace useState, que también es recomendado por Meta (aplicación de Facebook). Pero para las versiones anteriores de React, podemos usar componentes de clase en los que dependemos del estado de los componentes.
Componentes de clase frente a componentes de función:
|
Componentes de clase |
Componentes de funciones |
|---|---|
| Los componentes de clase deben extender el componente de «React.Component» y crear una función de representación que devuelva el elemento requerido. | Los componentes funcionales son como funciones normales que toman «accesorios» como argumento y devuelven el elemento requerido. |
| También se conocen como componentes con estado. | También se conocen como componentes sin estado. |
| Implementan la lógica y el estado del componente. | Aceptan algún tipo de datos y los muestran en la interfaz de usuario. |
| Los métodos de ciclo de vida se pueden utilizar dentro de ellos. | Los métodos de ciclo de vida no se pueden utilizar dentro de ellos. |
|
Formato de Hooks dentro de componentes de clase: constructor(props) {
super(props);
this.state = { color: ‘ ‘ }
}
|
Formato de Hooks dentro de componentes de funciones: const [color,SetColor]= React.useState('')
|
| Necesita almacenar el estado, por lo tanto, se utilizan constructores. | Los constructores no se utilizan en él. |
| Tiene que tener un método «render()» dentro de eso. | No requiere un método de renderizado. |
Ejemplo 1: este es un ejemplo básico que ilustrará el componente de clase y el componente funcional:
Componente de clase:
Javascript
import React from "react";
class ClassComponent extends React.Component {
render() {
return <h1>It's a class component!</h1>;
}
}
export default ClassComponent;
Producción:
Ejemplo de componente de clase
Componente de función:
Javascript
import React from "react";
const FunctionComponent = () => {
return <h1>It's a function component!</h1>;
};
export default FunctionComponent;
Producción:
Ejemplo de componente de función
Ejemplo 2: Este es otro ejemplo de componente de clase y componente funcional:
Componente de clase:
Javascript
import React from "react";
class Something extends React.Component {
render() {
return <h1>A Computer Science
Portal For Geeks</h1>;
}
}
class ClassComponent extends React.Component {
render() {
return <Something />;
}
}
export default ClassComponent;
Producción:
Ejemplo de componente de clase
Componente de función:
Javascript
import React from "react";
const Something = () => {
return <h1>It's a better function
component!</h1>;
};
const FunctionComponent = () => {
return <Something />;
};
export default FunctionComponent;
Producción:
Ejemplo de componente de función
Publicación traducida automáticamente
Artículo escrito por saketsarin y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA