hand Inicio

SERVICIOS

Salir

noched铆a

WebSite de wallpapers con React

800 palabras
3 minutos
July 15, 2020

Vamos a preparar una aplicaci贸n parecida a la extensi贸n de chrome que exploramos otro curso con vanilla JS, pero esta vez en React

Pr贸logo

Se trata de conseguir una herramienta que nos muestre fondos de pantalla para inspirarnos, parecida a la que exploramos en este otro curso, pero esta vez en un entorno React

En mi caso esta herramienta la utilizo como fondo de una segunda pantalla que bastantes veces est谩 vac铆a y me sirve como marco

La herramienta final la puedes encontrar kuworking.com/wallpapers, hecha en Gatsby

Aqu铆 lo vamos a explorar en React, y es que al final integrar cualquier aplicaci贸n React en Gatsby es bastante trivial

Vamos all谩

  1. Pr贸logo
  2. C贸digo
  3. Comentario

C贸digo

B谩sicamente, lo que quiero es lo siguiente:

  • Pedir una imagen
  • Despu茅s rellenar un pool de im谩genes
  • Mostrar las im谩genes
  • Que al clicar la imagen esta se cambie y se utilicen los keywords del <input>

La mejor manera es visualizar un custom hook que nos proporcione lo que queremos

Con esto lo tendr铆amos todo

  • Un <input> para gestionar las keywords
  • Un <Wallpaper> que nos muestre el fondo de pantalla
  • Y que ese mismo wallpaper nos sirva de bot贸n para cambiar el fondo de pantalla

Ahora vamos a definir el hook, que el elefante de la habitaci贸n

Con una salvedad, y es que cuando pedimos la imagen random a unsplash 茅sta no nos da la imagen sino que nos devuelve la url definitiva y luego tenemos que volver a pedir esa url

Y un par de funciones (helpers) que nos dan funcionalidades concretas

En total, una estructura muy simple

Vamos a comentarlo

El componente principal <Wallpaper>

  • Simplemente nos devuelve un <input> y un <div> que tendr谩 la variable de background como fondo

Las funciones "extra" o helpers nos encapsulan la l贸gica para

  • wait nos permite esperar un tiempo bloqueando la ejecuci贸n
  • is_this_a_new_day nos devuelve un booleano que nos indica si estamos en un nuevo d铆a o no (y si es que no, repetimos la imagen)
  • get_response nos hace un fetch controlado en el tiempo, porque a veces una petici贸n se encalla y vale la pena terminarla y volver a repetir el tema

El hook useChangeBackground se encarga de toda la l贸gica restante

  • Devuelve [background, change_background, inputRef], es decir el estado donde se guarda el wallpaper, el m茅todo para cambiar el wallpaper, y la referencia del input

  • Trabaja con tres estados principales: el background en s铆, una lista para almacenar los backgrounds pre-cargados, y otra lista para realmente agregar los backgrounds pre-cargados

La raz贸n de tener dos listas aparentemente redundantes es porque la del medio me sirve como lista neutral

Es decir, cuando cambio el background con un click, este mueve un background de la lista neutral al background en s铆

Mientras tanto, la lista donde se van pre-cargando backgrounds est谩 cont铆nuamente manteni茅ndose "llena" con 10 im谩genes

El problema lo tengo cuando muevo ese background de la lista, ya que si en lugar de ser una lista independiente fuera la misma lista con los backgrounds pre-cargados entonces entrar铆amos en race conditions con lo que la misma lista se editar铆a desde dos sitios al mismo tiempo

En la pr谩ctica, esto quiere decir que repetir铆amos im谩genes b谩sicamente porque estar铆amos viendo listas previas

Total, con un array intermedio esto lo suavizo ya que s贸lo hago el volcado cuando 茅sta est谩 vac铆a, y s贸lo es en ese momento donde hay riesgo de race conditions (lo tienes en los comentarios del c贸digo)

  • La funci贸n change_background se ocupa precisamente de eso, de gestionar el que se carge una nueva imagen ya sea nueva porque los keywords han cambiado, o una de las im谩genes pre-cargadas

  • Luego tenemos un useEffect con [] que simplemente se encarga de cargar la primera imagen de todas

  • Y luego tenemos el segundo useEffect con [background, backgroundPoolTemp]

Es decir, este useEffect se ejecuta cada vez que background cambia, lo cual pasa a cada click para cambiar el background

Y tambi茅n cada vez que backgroundPoolTemp cambia, que pasa siempre en ese mismo bloque excepto cuando tiene m谩s de 10 elementos

En la pr谩ctica, esta funci贸n se ocupa de mantener siempre la lista de im谩genes precargadas llena hasta 10 im谩genes, y cuando 茅sta se vuelva a la lista neutral entonces tendr铆amos 20 im谩genes precargadas

Listos

Lo puedes probar en el codesandbox con el c贸digo final aqu铆 abajo

Recuerda de a帽adir las dependencias de @emotion/core y @emotion/styled

Comentario

Qu茅 le falta al c贸digo?

Hay un par de warnings avis谩ndonos que a los useEffect les falta la dependencia get_images y get_image

Estas funciones no van a cambiar nunca, por lo que puedes ignorar el warning, a帽adirlas como dependencias, o a帽adir la regla eslint para ignorar este tipo de warnings

Qu茅 m谩s?

Estamos utilizando useEffect con funciones as铆ncronas

Esto qu茅 quiere decir?

Que si estamos en medio de la ejecuci贸n y el componente se cancela (cuando el usuario cambia de p谩gina por ejemplo), si el c贸digo intenta cambiar un estado esto dar谩 una fuga de memoria

Soluci贸n? Cancelar ese c贸digo

useEffect nos da la posibilidad de ejecutar c贸digo cuando el componente se desmonte

Pues se trata simplemente de utilizar una variable para comprobar si el componente sigue activo o no

Por ejemplo

As铆 evitamos el setBackground si ya no hay componente

馃檵鈥嶁檪锔

Qu茅 tal el curso?
馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹

M谩s entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]