Tutorial React Parte 20: primera lección de renderizado condicional

Hoy, en la traducción de la siguiente parte del tutorial de React, hablaremos sobre la representación condicional.

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 36. Representación condicional, parte 1


→ Original

Las tecnologías de representación condicional se utilizan en los casos en que algo debe mostrarse en una página de acuerdo con una determinada condición. En esta lección, hablaremos sobre cómo mostrar un mensaje especial (puede estar representado por algo así como una pantalla de carga) mientras la aplicación se está preparando para trabajar, cargando datos y, una vez que está lista, cómo reemplazarla Este mensaje es para otra cosa.

Hoy experimentaremos con una aplicación creada con las herramientas create-react-app, en el archivo App.js , que contiene el siguiente código:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               <Conditional isLoading={this.state.isLoading}/>           </div>       )   } } export default App 

Además, en la misma carpeta donde se encuentra el archivo App.js , hay un archivo de componente Conditional.js con el siguiente contenido:

 import React from "react" function Conditional(props) {   return (         ) } export default Conditional 

En esta etapa de trabajo, esta aplicación aún no funcionará, en el proceso de análisis del material lo arreglaremos.

Uno de los desafíos que enfrentan los desarrolladores de React es que tienen que aprender muchas herramientas que se pueden usar de varias maneras. Un programador no se limita necesariamente a una sola forma de usar una herramienta determinada. Esto está influenciado por el hecho de que el desarrollo de React es extremadamente cercano al desarrollo en JavaScript simple.

Por lo tanto, tenemos la oportunidad de usar diferentes enfoques para resolver los mismos problemas, por lo que las mismas herramientas se pueden usar de diferentes maneras. La representación condicional es esa área de Reacción en la que las ideas mencionadas anteriormente se manifiestan de manera especialmente fuerte. En realidad, antes de comenzar, me gustaría señalar que, aunque analizaremos varios enfoques para la aplicación de esta tecnología, las opciones reales para su uso no se limitan a ellos.

Hablemos sobre el código con el que ahora experimentaremos. Nosotros, en el archivo App.js , tenemos un componente basado en la clase. Su constructor inicializó un estado que contiene la propiedad isLoading establecida en true . Tal diseño se usa a menudo en casos en los que, para poner un componente en condiciones de funcionamiento, es necesario, por ejemplo, ejecutar solicitudes a una determinada API, y mientras el componente está esperando que lleguen los datos y los analiza, es necesario mostrar algo en la pantalla. Puede llevar entre 3 y 4 segundos completar la llamada a la API, y no desea que el usuario que mira la pantalla piense que su aplicación se bloqueó. Como resultado, el estado tiene una propiedad que indica si la aplicación actualmente está realizando ciertas acciones de servicio. Y la representación condicional se utilizará para mostrar algo que le dice al usuario que la aplicación está cargando algo en segundo plano.

El código del componente de la App tiene un método componentDidMount() , que discutiremos muy pronto. Mientras tanto, preste atención al método render() . Aquí mostramos el componente Condition , que se importa en el código ubicado en la parte superior del archivo App.js El componente isLoading pasa a este componente, que es el valor actual de la propiedad isLoading desde el estado del componente de la App . El código del componente Conditional no devuelve nada que pueda mostrarse en la pantalla, trataremos este componente un poco más tarde. Mientras tanto, regresemos al método componentDidMount() desde el código del componente de la App .

Recuerde que el método componentDidMount() nos permite ejecutar algún código inmediatamente después de que el componente, en nuestro caso es el componente de la App , se muestre por primera vez. En el código de este método, simulamos una apelación a una determinada API. Aquí configuramos el temporizador durante un segundo y medio. Cuando este tiempo pase, se lanzará el código de la función pasada a setTimeout() . En esta función, basándose en el supuesto de que su llamada simboliza el final de la carga de datos desde la API, se realiza un cambio de estado. A saber, su propiedad isLoading se establece en false . Esto indica que la descarga de datos se ha completado y luego la aplicación puede funcionar normalmente. En futuras clases, hablaremos sobre el uso de la función fetch() para cargar datos, por ahora nos limitaremos a la simulación anterior de este proceso.

Por cierto, será apropiado aquí una vez más plantear el tema de los métodos del ciclo de vida de los componentes. El hecho es que tan pronto como la propiedad del estado isLoading cambia de true a false , el componente Conditional recibe un nuevo valor de propiedad. Primero, la primera vez que se muestra el componente, recibe, en la propiedad isLoading , true , y luego, después de que el estado cambia, recibe la misma propiedad con el nuevo valor. De hecho, cuando el estado cambia, se llama nuevamente al método render() , como resultado, el componente Conditional también se mostrará nuevamente. Recuerde que Conditional es un componente funcional ordinario, es decir, su representación significa la llamada repetida de la función a la que se presenta. Pero lo que devolvemos de esta función cuando volvemos a renderizar el componente puede diferir de lo que se devolvió anteriormente. La razón de este cambio es el cambio en lo que pasamos al componente.

Entonces, el componente Conditional acepta la propiedad isLoading . Antes de comenzar a trabajar en el código, verificaremos si esos mecanismos que ya existen funcionan. Para hacer esto, devolveremos algunas marcas del componente y props.isLoading el valor props.isLoading en la consola. Después de eso, el código del componente se verá así:

 import React from "react" function Conditional(props) {   console.log(props.isLoading)   return (       <h1>Temp</h1>   ) } export default Conditional 

La página de la aplicación después de eso se verá como la que se muestra en la siguiente figura.


Página de aplicación en el navegador

Tenga en cuenta que true se muestra en la consola inmediatamente después de cargar la aplicación, y false , después de 1,5 segundos. Esto se debe al funcionamiento del mecanismo anterior en el método componentDidMount() del componente de la App .

Ahora hablemos de la representación condicional. Su esencia radica en el hecho de que mostramos algo en la pantalla solo si se cumple una determinada condición. En este caso, en lugar de mostrar la cadena Temp en la página, nosotros, en el componente Conditional , podemos verificar el valor de props.isLoading y, si es true , mostrar el texto Loading... en la página. Si este valor es false , lo que indica el final de la descarga, puede devolver algún otro texto del componente. En el código, se verá así:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   } else {       return (           <h1>Some cool stuff about conditional rendering</h1>       )   }  } export default Conditional 

Intente ejecutar este código en su hogar, actualice la página y observe cómo, cuando se carga la página, se muestra un texto y, después de un tiempo, otro.

Dadas las características de JavaScript, podemos simplificar el código anterior de esta manera:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   }   return (       <h1>Some cool stuff about conditional rendering</h1>   ) } export default Conditional 

Si la condición marcada en el bloque if es verdadera, la return en este bloque funcionará, después de lo cual se completará la función. Si la condición es falsa, la expresión de return de este bloque no se cumple y la función devuelve lo que se especifica en la segunda return de la función.

Ahora hablemos sobre cómo puede resolver los problemas de representación condicional utilizando el operador ternario . Esta construcción ha existido en JavaScript durante mucho tiempo. A menudo se usa en React para resolver tareas de representación condicional. Así es como se ve:

  ? 1 : 2 

El valor de la expresión 1 se devuelve si la condición es verdadera, el valor de la expresión 2 se devuelve si la condición es falsa.

En nuestro caso, utilizando el operador ternario, el código del componente Conditional se puede reescribir de la siguiente manera:

 import React from "react" function Conditional(props) {   return (       props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>   )  } export default Conditional 

Este diseño, aunque funciona, parece inusual. El hecho es que generalmente los componentes devuelven diseños más complejos. Por lo tanto, envuélvelo todo en un elemento <div> :

 import React from "react" function Conditional(props) {   return (       <div>           props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>       </div>   )  } export default Conditional 

Tal código también funciona, aunque ya no es como debería. Todo lo que está encerrado en <div&gtl; . Para solucionar esto, recordamos que las construcciones JS utilizadas en el marcado devuelto por los componentes deben encerrarse entre llaves y reescribir el código en consecuencia:

 import React from "react" function Conditional(props) {   return (       <div>                 {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}       </div>   )  } export default Conditional 

Ahora todo vuelve a funcionar como debería.

Cabe señalar que en el componente real el marcado devuelto por ellos parecería más complicado. Aquí, por ejemplo, en la parte superior de lo que muestra el componente, puede estar presente una barra de navegación, en la parte inferior se puede proporcionar un "pie de página" de la página, y así sucesivamente. Puede verse así:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Además, la presencia en el marcado devuelto por el componente de elementos adicionales no interfiere con los mecanismos de representación condicional. Además, estos elementos se mostrarán cuando props.isLoading sea true y cuando esta propiedad sea false .

Otra mejora que se puede hacer a este código se basa en el hecho de que, dado que props.isLoading es una propiedad booleana que toma el valor true o false , se puede usar directamente sin usar el operador de comparación estricto con true . El resultado es el siguiente:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Ahora hemos llegado a un ejemplo práctico del uso de la tecnología de representación condicional, pero los mismos resultados se pueden lograr de muchas maneras. Por ejemplo, generalmente en componentes como el nuestro, los paneles de navegación y los pies de página no se muestran. Dichos elementos de página generalmente se muestran ya sea por el componente de la App sí o por componentes especiales que se muestran por el componente de la App .

Además, debe tenerse en cuenta que aquí toda la lógica de la representación condicional se encuentra dentro del método render() del componente funcional, que se realizó solo para demostrar el código compacto ensamblado en un solo lugar. Pero, probablemente, el componente de la App debería ser responsable de la representación condicional, y un componente similar a nuestro componente Conditional debería simplemente mostrar lo que se le pasó. Si el componente de la App es responsable de determinar si algo se está cargando en un momento determinado, y cuando se completa esta operación, lo más probable es que sea responsable de determinar qué debe mostrarse en la página. Es decir, en nuestro caso, el código podría reorganizarse verificando la propiedad isLoading en el método render() del componente App y mostrando el texto como Loading... en caso de que la descarga no se complete, o mostrando un componente similar al componente Conditional en Si se completa la descarga. Al mismo tiempo, es posible que el componente Conditional no acepte propiedades de la App , mostrando solo lo que debería generar en cualquier caso.

Así es como se ve el código del componente de la aplicación, convertido de acuerdo con estas consideraciones:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               {this.state.isLoading ?               <h1>Loading...</h1> :               <Conditional />}           </div>       )   } } export default App 

Y aquí está el código actualizado del componente Conditional , en el que ahora no hay verificación de ninguna condición:

 import React from "react" function Conditional(props) {   return <h1>Some cool stuff about conditional rendering</h1> } export default Conditional 

Aquí, sin embargo, eliminamos la barra de navegación y el "sótano", pero esto no es importante en este caso.

Resumen


En esta lección, tuvo lugar su primera introducción a las tecnologías de representación condicional. La próxima vez continuaremos tratando con ellos. En particular, tendrá una segunda lección sobre representación condicional y trabajo práctico sobre este tema.

Estimados lectores! Si está desarrollando aplicaciones React, le pedimos que nos cuente cómo realiza el renderizado condicional.

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


All Articles