Un componente de clase es aquél que está definido con una clase de JavaScript. Esta clase debe tener dos particularidades:
- Primero, debe ser una clase de ES6 de JavaScript que herede de React.Component
- Debe poder implementar un método
render()
que retorne los elementos de React para la interfaz de dicho componente.
Históricamente, un componente de clase se diferencía de un componente funcional en dos principales cosas: La capacidad de administrar un estado propio del componente y la exposición de métodos que pueden ejecutar funcionalidad personalizada en distintas etapas del ciclo de vida de un componente.
Sin embargo, con la introducción de hooks en React 16, los componentes funcionales homologaron la funcionalidad de los componentes de clase en que ahora también pueden guardar un estado y ejecutar métodos del ciclo de vida de un componente.
En ese sentido, gran parte de la comunidad de desarrolladores que usan React, recomiendan usar componentes funcionales y hooks, en lugar de componentes de clase. Al mismo tiempo, el equipo que mantiene y desarrolla React, recomienda que no se re escriban componentes de clase en componentes funcionales a menos que sea necesario.
Esto quiere decir que en el futuro, React soportará ambas formas de declarar un método, con clases y con funciones. Esto significa que para un desarrollador nuevo de React es necesario conocer ambas formas de declarar componentes ya que es probable que en su trabajo día a día se encuentre con componentes de clase y componentes funcionales como parte de una misma aplicación.
Por último, cabe mencionar que algunos conceptos de React son más claros cuando se observan a través de la definición en un componente de clase, particularmente los métodos del ciclo de vida de un componente.
-
check_circle_outlineMódulo 1 | 4 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 7 clases
JSX - Templates
expand_more -
check_circle_outlineMódulo 3 | 10 clases
Componentes
expand_more -
check_circle_outlineMódulo 4 | 3 clases
Formularios
expand_more -
check_circle_outlineMódulo 5 | 4 clases
Code splitting
expand_more -
check_circle_outlineMódulo 6 | 4 clases
React context
expand_more -
check_circle_outlineMódulo 7 | 3 clases
Cómo funciona React
expand_more -
check_circle_outlineMódulo 8 | 7 clases
Componentes de clase
expand_more-
done_all
Clase 1
Qué son los componentes de clase
-
done_all
Clase 2
Cómo definir un componente de clase
-
done_all
Clase 3
Trabajando con props
-
done_all
Clase 4
Trabajando con el estado
-
done_all
Clase 5
Preservando el contexto
-
done_all
Clase 6
Métodos del ciclo de vida de un componente
-
done_all
Clase 7
Ciclo de vida en un componente funcional
-
-
check_circle_outlineMódulo 9.-
Examen del curso
expand_more-
done_all
Examen
Examen final del curso
-