React Tutorial Parte 14: Taller sobre componentes basados ‚Äč‚Äčen la clase, estado de los componentes

En esta parte de la traducci√≥n del curso de capacitaci√≥n React, le sugerimos que complete una tarea pr√°ctica para trabajar con componentes basados ‚Äč‚Äčen la clase. Despu√©s de eso, comenzaremos a dominar un concepto tan importante de React como el estado de los componentes.

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 25. Taller. Componentes basados ‚Äč‚Äčen clase


‚Üí Original

‚ĖćTrabajo


A continuaci√≥n se muestra el c√≥digo que debe colocarse en el archivo index.js de una aplicaci√≥n React est√°ndar creada por create-react-app . Convierta los componentes funcionales que encontrar√° en este c√≥digo en componentes basados ‚Äč‚Äčen clases y, adem√°s, busque y repare un peque√Īo error.

El código para el archivo index.js :

 import React from "react" import ReactDOM from "react-dom" // #1 function App() {   return (       <div>           <Header />           <Greeting />       </div>   ) } // #2 function Header(props) {   return (       <header>           <p>Welcome, {props.username}!</p>       </header>   ) } // #3 function Greeting() {   const date = new Date()   const hours = date.getHours()   let timeOfDay     if (hours < 12) {       timeOfDay = "morning"   } else if (hours >= 12 && hours < 17) {       timeOfDay = "afternoon"   } else {       timeOfDay = "night"   }   return (       <h1>Good {timeOfDay} to you, sir or madam!</h1>   ) } ReactDOM.render(<App />, document.getElementById("root")) 

‚ĖćSoluci√≥n


Primero, veamos qué ofrece la aplicación en su forma original abriéndola en un navegador.


P√°gina de origen del navegador

Puede ver que la línea superior que aparece en la página no se ve bien. Después de la coma que sigue a Bienvenida, obviamente debería haber algo como un nombre de usuario.

Si analizamos el código de la aplicación, resulta que el componente Header muestra esta línea, esperando obtener la propiedad de username que se establece al crear su instancia. Se crea una instancia de este componente en el componente App . Habiendo descubierto esto, podremos corregir el mismo error que se mencionó en la tarea.

Cabe se√Īalar que los componentes generalmente se colocan en diferentes archivos, pero en este caso los describimos todos en un solo archivo.

Procedemos a transformar el componente funcional de la App en un componente basado en la clase. Para hacer esto, es suficiente traer su código a este formulario:

 class App extends React.Component {   render() {       return (           <div>               <Header username="vschool"/>               <Greeting />           </div>       )   } } 

Ahora la palabra clave de class aparece antes del nombre del componente, luego se extends React.Component comando extends React.Component , después de lo cual, el cuerpo de la clase se describe entre llaves. Debe haber un método render() que devuelva lo que devolvimos del componente funcional. Otros componentes se procesan de la misma manera. Presta atención a la construcción de <Header username="vschool"/> . Aquí pasamos la propiedad de username con el valor de vschool componente Header , vschool así el error que está en la aplicación original.

Como ya sabe, el componente Header espera obtener la propiedad de username , y en el componente funcional se accede a esta propiedad utilizando la construcci√≥n props.username (en este caso, los props son un argumento de la funci√≥n que describe el componente). En componentes basados ‚Äč‚Äčen clases, el mismo se parece a this.props.username . Aqu√≠ est√° el c√≥digo redise√Īado para el componente Header :

 class Header extends React.Component {   render() {       return (           <header>               <p>Welcome, {this.props.username}!</p>           </header>       )   } } 

El tercer componente, Greeting , es ligeramente diferente de los dem√°s. El hecho es que en √©l, antes del comando de return , se realizan algunos c√°lculos. Al convertirlo a un componente basado en una clase, estos c√°lculos deben colocarse en el m√©todo render() antes del comando return. Aqu√≠ est√° el c√≥digo para el componente de Greeting redise√Īado:

 class Greeting extends Component {   render() {       const date = new Date()       const hours = date.getHours()       let timeOfDay             if (hours < 12) {           timeOfDay = "morning"       } else if (hours >= 12 && hours < 17) {           timeOfDay = "afternoon"       } else {           timeOfDay = "night"       }       return (           <h1>Good {timeOfDay} to you, sir or madam!</h1>       )   } } 

Tenga en cuenta que este componente se utilizó en la declaración de este componente: class Greeting extends Component . Esto a menudo se hace por razones de brevedad, pero para que esto funcione, necesitamos refinar el comando de importación react , llevándolo a esta forma:

 import React, {Component} from "react" 

Así es como se ve la página de la aplicación reciclada en un navegador.


P√°gina de aplicaci√≥n redise√Īada en el navegador

En realidad, se ve igual que la p√°gina de la aplicaci√≥n original, y la √ļnica diferencia notable entre estas p√°ginas es que el nombre de usuario pasado al componente Header ahora se muestra en la primera l√≠nea.

Aquí está el código completo para el archivo index.js procesado:

 import React, {Component} from "react" import ReactDOM from "react-dom" // #1 class App extends React.Component {   render() {       return (           <div>               <Header username="vschool"/>               <Greeting />           </div>       )   } } // #2 class Header extends React.Component {   render() {       return (           <header>               <p>Welcome, {this.props.username}!</p>           </header>       )   } } // #3 class Greeting extends Component {   render() {       const date = new Date()       const hours = date.getHours()       let timeOfDay             if (hours < 12) {           timeOfDay = "morning"       } else if (hours >= 12 && hours < 17) {           timeOfDay = "afternoon"       } else {           timeOfDay = "night"       }       return (           <h1>Good {timeOfDay} to you, sir or madam!</h1>       )   } } ReactDOM.render(<App />, document.getElementById("root")) 

Si la implementaci√≥n de esta tarea pr√°ctica no le caus√≥ ninguna dificultad, genial. Si a√ļn no se siente muy c√≥modo con los componentes basados ‚Äč‚Äčen clases, t√≥mese el tiempo de experimentar con ellos. Por ejemplo, puede rehacer componentes basados ‚Äč‚Äčen clases nuevamente en componentes funcionales y luego realizar la transformaci√≥n inversa.

Lección 26. Estado del componente


‚Üí Original

El estado es un concepto de reacción increíblemente importante. Si el componente necesita almacenar cualquiera de sus propios datos y administrar estos datos (en contraste con la situación en la que el componente principal le transfiere datos mediante el mecanismo de propiedad), use el estado del componente. Hoy nos fijamos en los conceptos básicos sobre el estado de los componentes.

Un estado son solo los datos que controla el componente. En particular, esto significa que el componente puede cambiar estos datos. Al mismo tiempo, las propiedades que ya nos son familiares, obtenidas por el componente del componente padre, no pueden ser cambiadas por el componente receptor. Ellos, de acuerdo con la documentación de React, son inmutables (inmutables). Por ejemplo, si intentamos, en un componente basado en una clase, usar una construcción como this.props.name = "NoName" , encontraremos un mensaje de error.

Cabe se√Īalar que si alg√ļn componente necesita trabajar con estado, entonces deber√≠a ser un componente basado en la clase. Hablemos sobre c√≥mo equipar el componente con el estado comenzando con el siguiente fragmento de c√≥digo, que es el contenido del archivo App.js de un proyecto est√°ndar creado por create-react-app :

 import React from "react" class App extends React.Component {   render() {       return (           <div>               <h1>Is state important to know?</h1>           </div>       )   } } export default App 

Así es como se ve la página de la aplicación en un navegador.


Página de aplicación en el navegador

Para equipar un componente con estado, primero debe crear un constructor de clase. Parece un método de clase constructor() . Después de eso, el código del componente se verá así:

 class App extends React.Component {   constructor() {         }     render() {       return (           <div>               <h1>Is state important to know?</h1>           </div>       )   } } Constructor() 

Este es un m√©todo especial integrado en JavaScript que est√° dise√Īado para crear e inicializar objetos basados ‚Äč‚Äčen clases. En realidad, si necesita inicializar algo al crear un objeto, las operaciones correspondientes se realizan exactamente en el m√©todo constructor() .

Lo primero que debe hacer en el c√≥digo del constructor es llamar al constructor de la clase padre. Esto se hace usando la funci√≥n super() . En el constructor de la clase padre, se pueden realizar ciertas operaciones de inicializaci√≥n, cuyos resultados ser√°n √ļtiles para nuestro objeto. As√≠ es como se ver√° nuestro constructor de clases:

 constructor() {   super() } 

Ahora, para equipar el componente con estado, necesitamos, en el constructor, agregar la propiedad de state a la instancia de clase. Esta propiedad es un objeto:

 constructor() {   super()   this.state = {} } 

Aquí lo inicializamos con un objeto vacío. Puede trabajar con estado en el código del componente utilizando la construcción this.state . Agregue una nueva propiedad al estado:

 constructor() {   super()   this.state = {       answer: "Yes"   } } 

Ahora pensemos en cómo usar lo que está almacenado en el estado en el código. Recuerde que el componente muestra la pregunta Is state important to know? . El estado almacena la respuesta a esta pregunta. Para agregar esta respuesta después de la pregunta, debe hacer lo mismo que solemos hacer agregando construcciones de JavaScript al código JSX. Es decir, agregue la construcción {this.state.answer} al final de la línea. Como resultado, el código completo del componente se verá así:

 class App extends React.Component {   constructor() {       super()       this.state = {           answer: "Yes"       }   }     render() {       return (           <div>               <h1>Is state important to know? {this.state.answer}</h1>           </div>       )   } } 

Y así es como se verá la página de la aplicación en el navegador.


Página de aplicación en el navegador

Aqu√≠ me gustar√≠a se√Īalar que el estado que recibe el componente durante la inicializaci√≥n se puede cambiar durante la operaci√≥n del componente. Adem√°s, los componentes pueden pasar el estado a los componentes descendientes utilizando el mecanismo de trabajar con propiedades que ya conoce. Por ejemplo, en nuestro caso, si suponemos que hay un cierto componente de ChildComponent , los datos del estado se pueden transferir a este de la siguiente manera:

 <ChildComponent answer={this.state.answer}/> 

Si bien no hablaremos en detalle sobre cómo cambiar los datos almacenados en el estado del componente. Solo notamos que al llamar al método setState() , que se utiliza para resolver este problema, no solo se cambiará el estado del componente, sino que también se actualizarán los datos de estado transmitidos a través del mecanismo de propiedad a sus componentes secundarios. Además, cambiar el estado hará que los datos del estado que se muestran en la página de la aplicación cambien automáticamente.

Resumen


Hoy tuvo la oportunidad de trabajar con componentes basados ‚Äč‚Äčen clases. Adem√°s, su introducci√≥n al concepto de estado del componente comenz√≥ aqu√≠. La pr√≥xima vez, encontrar√° tareas pr√°cticas para trabajar con el estado.

Estimados lectores! Si utiliza React en la pr√°ctica, cu√©ntenos c√≥mo administra el estado de los componentes. ¬ŅUtiliza herramientas est√°ndar de React o algo m√°s?

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


All Articles