Tutorial React Parte 13: Componentes basados ‚Äč‚Äčen clases

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.

imagen

→ 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 curso

Lecci√≥n 24. Componentes basados ‚Äč‚Äčen clases


‚Üí Original

Si, 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.

Source: https://habr.com/ru/post/437990/


All Articles