Hola Coders 👋!
Este Post esta dedicado a ReactJs, describiremos los tipos de componentes que podemos utilizar en React, tenemos dos tipos de componentes, los componentes de clase y los componentes funcionales, que pueden tener otros nombres ya que cada uno de ellos tiene sus propias características.
Class components: Tienen un estado o State y pueden ser llamados también Statefull Components, estos componentes tienen siempre un método render() y otra cosa muy importante en estos componentes existen ciclos de vida, de los cuales hablaremos en otro post.
Functional components: No tienen un estado o State, que pueden ser llamados tambien Stateless Components simplemente son funciones puras y no tienen un método render() a diferencia del anterior.
vamos a ver un ejemplo de cada uno 😉
Componente de clase o Statefull Component👇
Podemos ver que hereda de Component, tiene un método Constructor y un State y como lo mencione anteriormente tiene un método render.
Componente funcional o Stateless Component👇
En este componente podemos ver que no tiene un State, tampoco un método render y mucho menos un método constructor solo retorna un template.
Tal vez te encuentres un poco confundido y te preguntes cuando usar cada uno de estos componentes, es muy sencillo primero vamos a nombrarlos diferente.
Smart Components o Componentes Inteligentes.
Estos componentes son los Componentes de clase, y en estos tenemos toda nuestra lógica específicamente para ese componente por ejemplo en ellos podemos consumir una API y posteriormente, los datos que obtuvimos de esa API los pasamos vía props a nuestro componente funcional para mostrarlo al usuario 🤭.
Componentes Tontos o Silly Components.
Estos componentes son los Componentes funcionales, y solo se encargan de mostrar datos, que previamente recibieron de un Smart Component, cabe resaltar que estos componentes no saben ni se enteran de nada de lo que pasa en la app, solo se encargan de mostrar templates.
En realidad es muy sencillo aprender sobre los tipos de componentes en React Js les dejo un vídeo para que lo entiendan mejor.
Espero este Post les haya servido y hayan resuelto sus dudas nos vemos pronto 😉
Top comments (2)
Muchas gracias por la explicación.
gracias por el video