0

Estoy estudiando React sin embargo aún no me queda claro cuál es la diferencia entre un Elemento y un Componente de React, claro que he leído la teoría y he practicado los ejercicios del curso sin embargo siento que aún no puedo identificarlos del todo y la verdad no quiero errar al momento de explicarle a mis compañeros en el trabajo.

¿Alguien podría ayudarme con esta duda?

1 respuesta 1

3

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.