Actualización Jan, 2024
Es confuso, pero lo siguiente puede ayudar:
React Component.
- Es un contenedor que puede configurarse con diferentes opciones como state, props, context, children, statics y stateless components.
- Cuando define mutabilidad de estado (state changes), se le llama Statefull Component.
- Cuando no define mutabilidad de estado, se le llama Stateless Component (componentes re-utilizables), solo usa el método
return
y normalmente es un contenedor de Elementos React.
- Se declara con
createReactClass
, ES6 Class o como una función JS.
React Element
- Es la representación virtual de un elemento HTML, esta representación se conoce como virtual DOM.
- Se puede crear con el método
React.createElement(tag)
, o directamente con JSX.
- Su contenedor es un Satetless component
- Se puede agrupar cierto numero de React Elements dentro del método
return
.
- Un Componente en react también es un React Element.
Con la introducción de los React Hooks, están surgiendo nuevos patrones al códificar componentes ReactJs, al parecer el uso de ES6 Class sintax, se está remplanzando por simples funciones JS.
Aquí el enlace con un ejemplo el Hook useState
:
Uso básico de Hook useState
Al analizar los nuevos patrones ReactJs con sintáxis Class/function, para identificar si estamos ante un Componente Statefull o Stateless, debemos buscar si se define estado; si se define estado, entonces estamos ante un Statefull Component, si no define estado es un Stateless Component (re-utilizable).
En el siguiente video, se explica de forma muy clara el uso básico de los React Hooks:
Hooks React Conf 2018
En este artículo, se explican las diferencias entre Class/function:
Class vs function React
React Component vs React Element
Saludos