馃枛 Inicio

SERVICIOS

Salir

noched铆a

El c贸digo que orquesta las funciones

900 palabras
4 minutos
May 7, 2020

El c贸digo que orquesta las funciones

Ahora ya s贸lo nos falta el c贸digo principal

En realidad nuestro desarrollo deber铆amos empezarlo por aqu铆, definiendo la l贸gica central y llamando a funciones imaginarias que hagan cosas concretas

Y luego, preocuparnos de esas funciones

C贸digo central

Bien, pues aqu铆 definimos nuestra funci贸n Wallpaper que por convenio si queremos que sea un componente tiene que empezar con may煤sculas

Y as铆, lo definimos como default y ya tenemos el componente

En las primeras dos l铆neas utilizamos el useState()

El useState() (un hook de React) lo que nos permite es especificar variables que persistir谩n entre actualizaciones del virtual DOM

En otras palabras, si nosotros en lugar de hacer esto hacemos lo siguiente

Y luego en el c贸digo les cambiamos de valor, cuando haya una repintada repaint o `rerender' del DOM, esos valores no persistir谩n y se borrar谩n, y tendremos los valores iniciales otra vez

Si queremos valores que persistan, siempre podr铆amos guardarlos en localStorage

Pero no queremos que se graben a fuego en el navegador, s贸lo que resistan en la misma sesi贸n, pues para esto tenemos el useState()

Y funciona de la manera como ves, definiendo un array con el nombre de la variable background y con el nombre de la funci贸n que utilizaremos para cambiar esa variable setBackground(), dos nombres que los escoges tu aunque por convenio se sigue 茅ste xxx y setXxx()

Y por qu茅 necesitamos una funci贸n para cambiar la variable? No podr铆amos asignarla otra vez y ya est谩?

S铆 que podr铆amos, pero no funcionar铆a, tenemos que utilizar la funci贸n

Seguimos con

Donde definimos las variables input_id que le asignamos un valor con React.createRef(), sin entrar en detalles pero esto nos crea una referencia que luego pondremos en el <input />, y esto lo hacemos as铆 porque en React no podemos utilizar el document.getElementById() que utilizamos en la extensi贸n (en el curso correspondiente), y esto es por lo siguiente

En React no podemos acceder directamente al DOM, tenemos que acceder al virtual DOM, y si queremos acceder al DOM no podemos acceder con las funciones habituales, en este caso lo hacemos con React.createRef()

Lo suyo ser铆a utilizar el hook useRef(), de funcionamiento casi id茅ntico

La manera que react nos da para interaccionar con el DOM es 茅sta, a trav茅s de referencias

useEffect

Luego tenemos el useEffect(), otro hook que aqu铆 utilizamos para ejecutar lo que hay dentro una sola vez

Es decir, en React todo el c贸digo se ejecuta de nuevo cuando hay una repintada (que palabro m谩s desagradable, a ver si encuentro alguna alternativa mejor, esto es el repaint de toda la vida)

Pero no queremos que cada vez que haya una repintada nos vuelva a cambiar el wallpaper! Para evitar esto utilizamos el c贸digo

Y por qu茅 esto funciona? Porque useEffect() s贸lo ejecutar谩 el c贸digo que contenga cuando lo que haya en el array 煤ltimo useEffect(() => {}, ['este array']) cambie de valor

Y como le hemos puesto un array vac铆o, pues nunca se repintar谩

Y el c贸digo de enmedio? en realidad lo que he puesto es simplemente esto

Pero para evitar esas fugas de memoria que te comentaba antes, y porque no se puede llamar a una funci贸n con await dentro de useEffect sino que hay que encapsularla con otra funci贸n async antes, pues el c贸digo se nos queda m谩s largo

Styled Components

El return del componente ya lo hemos visto antes junto con los styled componentes, pero nos falta apuntalarlo

Aqu铆 le mandamos a <Main> la variable de nombre background y de valor la variable background, que contiene la imagen de unsplash

Cada vez que esa variable cambie el elemento <Main> se repintar谩 (con el nuevo valor)

Y adem谩s le decimos con onClick que cada vez que se clicke sobre el elemento ejecutaremos la funci贸n new_wallpaper() para forzar un cambio de imagen

Y para terminar le ponemos en el <input> la referencia que hemos creado antes y que utilizaremos para acceder a su valor, y definimos tambi茅n el placeholder con el texto de las keywords por defecto que hemos definido antes

Y ya lo tenemos!

C贸digo final

El c贸digo final de index.js final nos quedar谩 as铆, con una 煤ltima modificaci贸n que ahora comento

La modificaci贸n es en los styled-components, en concreto 茅sta

En el elemento <Main> le hemos mandado la variable background, pues la manera que tenemos de acceder a esta variable en los styled components es esta

Es decir, que la funci贸n recibe una variable que se llama props como argumento, y que nuestra variable colgar谩 de ese objeto

Podr铆as verlo as铆

Y ahora s铆 que ya que s铆, pero antes, una 煤ltima cosa

F铆jate que no he puesto todas las funciones fuera del componente Wallpaper

La decisi贸n va un poco a gustos, todo lo que vaya fuera del componente facilita la lectura, pero si hay funciones que s贸lo se entienden dentro del componente quitarlas dificulta su lectura

El criterio es el mismo que utilizamos para definir componentes, un 煤nico componente o lo divido en varios? Casi siempre modularizar es una buena idea, pero si modularizamos demasiado estamos burocratizando nuestro c贸digo

Por lo tanto, equilibrio

Dicho esto, s铆 que hay una raz贸n poderosa para definir las funciones fuera de los componentes: para evitar que se vuelvan a renderizar (aunque no tiene porqu茅) si es que te interesa que no se vuelva a rerenderizar

Ahora ya podemos hacer un gatsby develop en nuestro vscode a ver qu茅 tal

Y vemos que funciona! 馃檶馃檶

Aunque la imagen no ocupa toda la pantalla, lo solucionamos en seguida

Bug anterior

Antes he hablado de un bug en el c贸digo (cap铆tulo anterior) que all铆 correg铆a cambiando stillMounted que antes era un string por lo que pasaba a ser un object con stillMounted.value

Esto lo hac铆a porque si pasaba un string no estaba pasando la misma variable sino que se estaba clonando esa variable

Si en lugar de pasar un string paso un objeto, no se clona el objeto sino la referencia al objeto con lo que sigo accediendo al mismo objeto (y no a uno nuevo)

Sin profundizar m谩s, en este cap铆tulo el c贸digo a cambiar ser铆a el siguiente:

que pasar铆a a ser

Y ya tenemos el cuarto cap铆tulo del curso donde hemos visto la l贸gica principal del programa utilizando las funciones del cap铆tulo anterior

Nos vemos en el quinto cap铆tulo, en Ajustar el css

Qu茅 tal este cap铆tulo?
馃憣 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 馃檹

Newsletter de kuworking, un correo de tanto en cuanto

Quiz谩 te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]