Lo que quiero decir con conceptos avanzados es que podemos hacer cosas realmente complicadas. Así que creemos una nueva ruta, que mostrará un conjunto de usuarios. Dentro de aquí, vamos a crear un nuevo archivo, index.tsx. Y como siempre, debemos tener un componente predeterminado. Así que aquí, voy a borrar todo. Solo veremos, hola quick, ¿de acuerdo? Y lo que me gustaría hacer es mostrar una lista de, vamos a mostrar una lista de todos tus repositorios favoritos, ¿de acuerdo? Así que voy a hacer un poco de trampa y copiar el código aquí. Oh, veo que este es un código diferente, de acuerdo. Así que usaremos este favorito, de acuerdo. Permíteme copiar este código aquí. Aquí. Y aquí. De acuerdo, y en lugar de devolver la longitud, voy a devolver un favorito, y eso será, no tengo información de tipo configurada para Super Base, pero definitivamente podrías hacerlo, hay cosas que podrías hacer. Así que vamos a decir que vamos a tener un correo electrónico de cadena de usuario, oh, perfecto, de acuerdo. No sé cómo compilar una nueva lista, pero hay información correcta. De acuerdo, ahora vamos a obtenerla. Entonces eso no es es favorito, use favoritos. Vamos a conectar eso a todo, para que Experian se convierta en un segundo método. Ahí vamos. Guardando esto. Creo que ya tenemos la demostración en marcha, así que guárdalo exactamente como hicimos la demostración, y luego podemos olvidarnos de ello. Y luego todo lo que hemos hecho hasta ahora, y podemos ir a alimentar nuestro reloj, que será la primera ronda de creación de medios. Y luego el laboratorio, que será el último que usemos para la creación de medios. Voy a mostrarte dos formas diferentes de hacerlo en un minuto. Voy a crear un usuario, que alimenta este índice, vamos a ver, sí, solo, De acuerdo, vamos a ver, todo porque creamos gris, queremos consultar el uso de un repositorio específico, y voy a poner todo esto, ahí vamos, así que aquí está nuestra lista de favoritos. Así que hay dos, de acuerdo, así que tenemos una lista de favoritos aquí y puedo hacer clic en cualquiera de ellos y abrirlo en un archivo separado y venir aquí. Así que eso debería ser bastante sencillo, así que hagamos lo siguiente, que es, me gustaría ejecutar, básicamente, me gustaría tener un cuadro de búsqueda aquí, que me permita buscar cualquier nombre de usuario específico en él, así que veamos, creo que lo que tengo en mente está aquí, es input.text usuario. El usuario necesita usar señal. Entonces, ya sabes, solo tengo nombre de usuario y tengo que escribir aquí, y me gustaría mostrar todos los usuarios que están en ese documento, allí. Pero como quiero comunicarme con el servidor, no quiero abrumar al servidor, y lo que realmente quiero es tener un debounce del servidor debounce, debounce usuario, que es, bueno, ¿qué es esto? Que es un, es lo mismo que un usuario, pero retrasado, ¿verdad? Entonces, al imprimir debounce usuario punto valor, me gustaría verlo retrasado. Para eso hay algo llamado useTask. Entonces, useTask es similar a useEffect para las personas que están familiarizadas con
React, pero hay suficientes diferencias que pensamos que nombrarlo exactamente igual causaría confusión. Y aunque puedes pensar en ello como useEffect, hay suficientes diferencias entre cómo funciona useEffect y cómo funciona en Quick que vale la pena profundizar en ello. Así que lo que voy a hacer es decir rastrear y vamos a decir eso. Así que básicamente estamos diciendo, oye, cada vez que cambie el valor del usuario, queremos volver a ejecutar esta función. Hasta ahora, no hace nada útil. Así que lo que voy a hacer es decir, setTimeout. Y vamos a decir que debounce usuario punto valor es igual al valor después de 500 milisegundos. Y luego también tenemos que hacer una limpieza. Así que si, si esta función se vuelve a ejecutar antes de que, ya sabes, antes de que pasen 5 milisegundos, entonces deberíamos hacer una limpieza o borrar el temporizador, ¿verdad? Y ahora, fíjate que hay un nombre de usuario aquí y puedo escribir Hevery, y mientras escribo, no sucede nada, pero en el momento en que dejo de escribir medio segundo después, M Hevery aparece en esta página. Lo siento, solo estaba volviendo a leer la pregunta, ya respondí esto. De acuerdo, como puedes ver, hay un retraso, ¿verdad? Hay un retraso de medio segundo, pero fíjate que mientras sigo escribiendo, el retraso de medio segundo no se aplica. Solo ocurre cuando dejo de escribir, ¿verdad? Así que básicamente estamos configurando una tarea y la tarea dice, oye, cada vez que el valor del usuario cambie, porque hay un seguimiento aquí, vuelve a configurar un temporizador y este temporizador, este temporizador establece el valor del usuario debounce, a la valor actual de lo que te da el seguimiento pero es un retraso de 500 segundos y, por supuesto, hay una función de limpieza que, si esta función se vuelve a ejecutar antes del otro lado, entonces no está bien. Ahora podrías preguntarte, como, sí, pero, como en
React, solo pones las suscripciones aquí al final. Claro, pero surge el mismo problema, que es que la única razón por la que funciona en
React es porque
React vuelve a ejecutar el componente todo el tiempo, ¿verdad? Mientras que si hago un
console log aquí, si hago un render, voy a ver un render en un servidor, pero no veo un render en el cliente. Incluso si escribo, el render aún no ocurre en el cliente. ¿Cuál es la diferencia entre useTask y createEffect sólido? ¿Por qué necesitas hacer un seguimiento? ¿No puede saber automáticamente que hay una señal y volver a ejecutar? De acuerdo, todas estas son buenas preguntas. Entonces, useTask es, en muchos aspectos, muy, muy similar a createEffect, pero hay un par de diferencias. La primera diferencia es que esta tarea puede ser asíncrona. Por lo tanto, podríamos reescribir esta función de la siguiente manera. Entonces, digamos que tenemos const delay igual a, delay igual a, sí, de acuerdo. Oh, cierto, pero esto no nos dará una limpieza. De acuerdo, eso está bien, podemos hacerlo de manera diferente. Podemos tratar esto y la limpieza es una función que toma un B, que es un número, creo cuando devolvemos. Y luego tenemos ID. ¿Esto va a funcionar? Yo, yo, yo, no te gusta, lo siento. Obtener término si me caigo, así. De acuerdo, lo que podemos hacer es reescribir este código como await delay 500 cleanup. Oh, lo siento, lo siento, me perdí aquí. La limpieza es una devolución de llamada, que es una función que toma, que produce. Estoy complicando esto innecesariamente, lo siento por eso. En este caso particular, esta función ahora es asíncrona. Y así solo necesitamos hacer esta parte. De acuerdo. Sí, funciona. De acuerdo, esta es una implementación alternativa. Y lo que hay que entender aquí es que ahora se nos permite hacer una declaración await. Entonces, la primera diferencia es que useTask es asíncrono. Puede ser sincrónico y, por lo tanto, está destinado a efectos secundarios. Y, por lo tanto, está destinado a no realizar un seguimiento automático. El problema es que si pones el valor del usuario aquí podrías realizar un seguimiento automático. Pero si lo pones detrás de la declaración await no podrías realizar un seguimiento automático. Y ahora tienes una elección. Puedes tener una API que diga, de acuerdo podemos hacer un seguimiento automático pero no puedes tener funciones asíncronas. O puedes tener una API que diga puedes tener un seguimiento asíncrono, pero solo puedes tener un seguimiento automático antes de la declaración await pero no después de la declaración await. O puedes tener una API que sea mucho más consistente y decir, oye, simplemente, cuando sea asíncrono simplemente no puedes hacer un seguimiento automático. Y así, porque queremos que esta cosa realmente tenga efectos secundarios fuera de la aplicación elegimos no hacer un seguimiento automático en este caso pero fíjate que en el otro ejemplo, que estaba aquí estábamos usando useComputed, ¿verdad? Y useComputed no necesita seguimiento. Y eso es porque useComputed debe ser síncrono. Y el modelo mental es que si estás haciendo un valor derivado que se puede obtener de forma síncrona a partir de un estado existente entonces debes usar useComputed y no es necesario hacer un seguimiento explícito y todo es automático. Por otro lado, si no estás realmente produciendo un valor sino que quieres crear un efecto secundario que ocurre fuera del sistema entonces probablemente será asíncrono. Y si lo haces, entonces debes hacer un seguimiento. Y hay una tercera forma de verlo que aún no hemos cubierto, pero lo cubriremos pronto es que tal vez quiero obtener un valor pero el valor no se deriva del estado actual sino que realmente tengo que ir a un estado externo.
Comments