Hoy, en la traducción de la siguiente parte del tutorial de React, hablaremos sobre la representación condicional.
→
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 36. Representación condicional, parte 1
→
OriginalLas 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 navegadorTenga 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>l; . 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.
