Hoy publicamos una traducción del próximo tutorial de React. Se enfoca en componentes basados en clases. Dichos componentes se crean utilizando la palabra clave de clase.
→
Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX→
Parte 2: componentes funcionales→
Parte 3: archivos de componentes, estructura del proyecto→
Parte 4: componentes principales y secundarios→
Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo→
Parte 6: sobre algunas características del curso, JSX y JavaScript→
Parte 7: estilos en línea→
Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes→
Parte 9: propiedades del componente→
Parte 10: Taller sobre trabajo con propiedades de componentes y estilo→
Parte 11: generación de marcado dinámico y método de matrices de mapas→
Parte 12: taller, tercera etapa de trabajo en una aplicación TODO→
Parte 13: componentes basados en clases→
Parte 14: taller sobre componentes basados en la clase, estado de los componentes.→
Parte 15: talleres de componentes de salud→
Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos→
Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes→
Parte 18: la sexta etapa de trabajo en una aplicación TODO→
Parte 19: métodos del ciclo de vida de los componentes.Parte 20: la primera lección de representación condicional→
Parte 21: segunda lección y taller sobre representación condicional→
Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas→
Parte 23: primera lección sobre trabajar con formularios→
Parte 24: Segunda lección de formularios→
Parte 25: Taller sobre trabajo con formularios→
Parte 26: arquitectura de la aplicación, patrón de contenedor / componente→
Parte 27: proyecto del cursoLección 24. Componentes basados en clases
→
OriginalSi, antes de comenzar a dominar este curso de capacitación, estudió React en base a otros cursos, es posible que tenga una pregunta sobre el hecho de que aquí usamos componentes funcionales. El hecho es que en muchos otros cursos este tema no está cubierto o se habla de componentes funcionales como algo que no es particularmente necesario. Algunos autores van más allá y dicen que es mejor no usar componentes funcionales, prefiriendo componentes basados en clases. Esto, en su opinión, salva al programador de cargas innecesarias. Creo que cualquiera que estudie React encontrará útil ver la imagen completa y aprender acerca de los enfoques de componentes que son populares en estos días. En particular, ahora la dirección es relevante, de acuerdo con los componentes funcionales que se usan siempre que sea posible, y los componentes basados en clases solo donde realmente se necesitan. Cabe señalar que todo esto es solo una recomendación. Cada desarrollador decide exactamente cómo diseñará sus aplicaciones.
Cuando enseño cursos de React, prefiero comenzar con componentes funcionales, porque las funciones son construcciones claras. Una sola mirada a un componente funcional es suficiente para comprender exactamente qué acciones realiza. Digamos, aquí está el código de un componente funcional, que es una función regular que devuelve un elemento
<div> que contiene un elemento
<h1> con algo de texto.
function App() { return ( <div> <h1>Code goes here</h1> </div> ) }
Pero, a medida que profundizamos en el estudio de React, nos familiarizamos con sus capacidades, resulta que los componentes funcionales no pueden ofrecernos todo lo que podamos necesitar de React-components. Por lo tanto, hoy hablaremos de componentes basados en clases. Es decir, comencemos creando un componente basado en una clase que realice las mismas acciones que el componente funcional anterior. En la próxima lección, tocaremos esas características adicionales que nos dan componentes basados en clases. En particular, estamos hablando de la posibilidad de trabajar con el estado de los componentes y con los métodos de su ciclo de vida.
Convierta un componente funcional en un componente basado en una clase. Si no está particularmente familiarizado con la palabra clave de
class , que apareció en ES6, y con las posibilidades que se abre para los desarrolladores, se recomienda que se tome un tiempo para conocer mejor las
clases .
Las descripciones de componentes basadas en clases comienzan con la palabra clave
class . Luego viene el nombre del componente, compilado de acuerdo con las mismas reglas que los nombres de los componentes funcionales. Al mismo tiempo, después de una construcción como
class App no va a ser algo así como un aparato ortopédico, pero una construcción del formulario
extends React.Component . Después de eso, coloque un par de llaves en las que se describirá el cuerpo de la clase.
Las clases en JavaScript son un complemento del modelo tradicional de herencia prototipo. La esencia de la construcción de la
class App extends React.Component es que declaramos una nueva clase y
React.Component que su prototipo debería ser
React.Component . La presencia de este prototipo en nuestro componente nos permite utilizar todas las funciones útiles que están disponibles en
React.Component en este componente.
Entonces, en esta etapa de trabajo en un componente basado en clases, su código se ve así:
class App extends React.Component { }
Un componente basado en clases debe tener al menos un método. Este es el método
render() . Este método debería devolver el mismo que usualmente regresamos de los componentes funcionales. Así es como se ve el código completo de un componente basado en clases, implementando las mismas características que el componente funcional anterior.
class App extends React.Component { render() { return ( <div> <h1>Code goes here</h1> </div> ) } }
Trabaje con componentes basados en clases de la misma manera que los componentes funcionales. Es decir, en nuestro caso, es suficiente reemplazar el código del componente funcional con el nuevo código y la aplicación funcionará como antes.
Hablemos del método
render() . Si, antes de formar los elementos devueltos por este método, necesita realizar algunos cálculos, se realizan en este método, antes del comando de
return . Es decir, si tiene algún código que determina el orden en que se forma la presentación visual del componente, este código debe colocarse en el método de
render . Por ejemplo, aquí puede personalizar estilos si usa estilos incorporados. También habrá código que implemente el mecanismo de representación condicional y otras construcciones similares.
Si está familiarizado con las clases, puede crear su propio método y colocar el código que prepara el componente para su visualización, y luego llamar a este método en el método de
render . Se ve así:
class App extends React.Component { yourMethodHere() { } render() { const style = this.yourMethodHere() return ( <div> <h1>Code goes here</h1> </div> ) } }
A saber, aquí procedemos de la suposición de que en el método
yourMethodHere() se generan
yourMethodHere() estilos, y lo que devuelve se escribe en la constante de
style declarada en el método
render() . Tenga en cuenta que la palabra clave
this usa para acceder a nuestro propio método. Más adelante hablaremos sobre las características de esta palabra clave, pero por ahora centrémonos en el diseño presentado aquí.
Ahora hablemos sobre cómo trabajar con las propiedades pasadas a las clases al crear instancias de ellas en componentes basados en clases.
Cuando usamos componentes funcionales, declaramos la función correspondiente con el parámetro
props , que es un objeto que recibió lo que se pasó al componente cuando se instanciaron. Se ve así:
function App(props) { return ( <div> <h1>{props.whatever}</h1> </div> ) }
Cuando se trabaja con un componente basado en una clase, lo mismo se ve así:
class App extends React.Component { render() { return ( <div> <h1>{this.props.whatever}</h1> </div> ) } }
Resumen
Como ya se mencionó, los componentes basados en clases le dan al desarrollador muchas opciones. Hablaremos más sobre estas características. Y ahora puede experimentar con lo que aprendió hoy y prepararse para una lección práctica sobre componentes basados en clases.
Estimados lectores! Si está utilizando React profesionalmente, díganos en qué situaciones utiliza componentes funcionales y en qué componentes basados en clase.
