1 00:00:02,440 --> 00:00:07,590 Entonces, para asegurarnos de que la computadora realmente pueda terminar ese juego y adivinar el 2 00:00:07,720 --> 00:00:12,000 número correcto, necesitamos verificar qué adivinó la computadora y luego terminar el 3 00:00:12,010 --> 00:00:17,590 juego si es el número que ingresamos. Para eso, podemos usar otro gancho React y ese es el gancho useEffect. 4 00:00:17,590 --> 00:00:25,670 useEffect le permite ejecutar efectos secundarios o, en general, le permite ejecutar la lógica después de cada ciclo de renderizado y, tal como 5 00:00:25,810 --> 00:00:31,300 se mencionó anteriormente, si todo esto de React Hooks es relativamente nuevo para usted, definitivamente 6 00:00:31,300 --> 00:00:36,790 revise algunos recursos dedicados de React Hooks o sumérjase en mi Reacciona el curso guía 7 00:00:36,850 --> 00:00:42,660 completo donde cubro los ganchos en detalle. Entonces, lo que haré con useEffect ahora es que lo llamaré aquí 8 00:00:42,770 --> 00:00:49,370 después de inicializar mi estado y mis referencias aquí y allá, tenemos una función, por lo que useEffect toma una función y esta función se ejecuta por 9 00:00:49,370 --> 00:00:54,950 defecto después de cada ciclo de renderizado para este componente Entonces, cada vez que se ha 10 00:00:54,950 --> 00:00:59,750 procesado, esta función se ejecuta, después de que se ha procesado, eso 11 00:00:59,750 --> 00:01:03,150 también es importante, no antes, no simultáneamente, después. 12 00:01:03,200 --> 00:01:10,290 Ahora, quiero comprobar si la computadora de conjetura actual creada es igual a la elección del usuario porque eso significa que 13 00:01:10,290 --> 00:01:11,980 el juego ha terminado. 14 00:01:12,120 --> 00:01:16,830 Ahora, ese no puede ser el caso para el primer ciclo de renderizado, por supuesto, porque excluimos la 15 00:01:16,830 --> 00:01:19,940 elección del usuario de los números adivinables, pero a partir de 16 00:01:19,940 --> 00:01:25,790 la segunda fila en adelante, por lo que una vez que hicimos clic en mayor o menor por primera vez, eso puede suceder. 17 00:01:25,860 --> 00:01:29,220 Entonces, allí, quiero disparar un mensaje y 18 00:01:29,220 --> 00:01:35,970 el juego ha terminado y enviarlo a la aplicación. js para que podamos cambiar la pantalla del juego por un juego 19 00:01:35,970 --> 00:01:36,890 sobre la pantalla. 20 00:01:36,970 --> 00:01:39,000 Ahora no tenemos esa pantalla todavía, así 21 00:01:39,000 --> 00:01:45,300 que agreguemos, agreguemos un juego sobre la pantalla aquí en la carpeta de pantallas y creemos una muy simple por ahora, la 22 00:01:45,300 --> 00:01:47,250 ajustaremos más tarde. Allí, simplemente 23 00:01:47,250 --> 00:01:50,660 tendré una vista y un texto y una 24 00:01:50,700 --> 00:02:00,760 hoja de estilo, por lo que normalmente importamos de React Native y luego tenemos el componente de juego sobre pantalla que toma algunos accesorios 25 00:02:00,760 --> 00:02:04,000 y luego devuelve algunos jsx al final. 26 00:02:04,000 --> 00:02:12,270 Aquí tenemos estos estilos con Stylesheet. creamos y luego exportamos el juego a la pantalla por defecto. 27 00:02:12,370 --> 00:02:17,170 Ahora, como dije, quiero mantener esto simple por ahora, solo tendré una vista allí con un texto del 28 00:02:17,170 --> 00:02:22,220 juego terminado y publicaremos más detalles allí más adelante. Por ahora, aquí solo asignaré un 29 00:02:22,230 --> 00:02:28,090 estilo, mi estilo de pantalla que agregaré a este objeto que pasamos a la hoja de 30 00:02:28,090 --> 00:02:28,560 estilo 31 00:02:28,690 --> 00:02:37,720 aquí en la parte inferior, establezca flex en 1 y tal vez justifique el contenido al centro y luego alinee los elementos al centro, para 32 00:02:37,750 --> 00:02:40,410 que este texto esté centrado por el momento. 33 00:02:40,420 --> 00:02:44,440 Ahora tenemos el juego sobre la pantalla y queremos representarlo en lugar de 34 00:02:44,440 --> 00:02:53,050 la pantalla del juego si el juego ha terminado. Entonces volvamos a la aplicación. js e importa el juego sobre la pantalla desde 35 00:02:53,050 --> 00:02:56,100 la carpeta de pantallas y desde el juego sobre la pantalla 36 00:02:56,240 --> 00:03:04,240 y la pregunta ahora es, por supuesto, ¿cuál es nuestra condición para renderizar esto? Bueno, al final, necesitaremos una información adicional de todos 37 00:03:04,390 --> 00:03:07,000 modos y esa es la 38 00:03:07,000 --> 00:03:12,570 cantidad de rondas que le tomó a la computadora para terminar el juego. 39 00:03:12,700 --> 00:03:18,720 Entonces, una cosa que quiero almacenar aquí en el componente de la aplicación es otro estado que administro y 40 00:03:18,730 --> 00:03:24,580 esa es la cantidad de rondas que tardó en finalizar, que es cero inicialmente porque aún no hemos 41 00:03:24,580 --> 00:03:26,120 comenzado el juego y 42 00:03:26,260 --> 00:03:31,540 nombraré estas rondas de adivinanzas y establece rondas de adivinanzas y puedes nombrar esto como quieras. 43 00:03:31,540 --> 00:03:34,130 Ahora el objetivo es establecer esto cuando el juego termine. 44 00:03:34,140 --> 00:03:38,230 Entonces, para eso, también agregaré otra función aquí al componente 45 00:03:38,230 --> 00:03:45,790 de la aplicación, game over handler y allí, quiero obtener mi número de rondas como argumento, por lo que espero 46 00:03:45,790 --> 00:03:50,010 obtener esto aquí para poder llamar a establecer rondas de conjetura 47 00:03:50,020 --> 00:03:56,440 a mi número de rondas llegué aquí. Ahora el juego sobre el controlador debería activarse desde el interior de la pantalla del juego, obviamente. 48 00:03:56,560 --> 00:04:01,390 Entonces, aquí en la pantalla del juego, quiero pasar un accesorio que nombraré en GameOver, suena como un nombre apropiado 49 00:04:01,420 --> 00:04:06,430 que se puede invocar desde dentro de la pantalla del juego o que contiene una referencia de función que luego se 50 00:04:06,430 --> 00:04:10,960 puede invocar desde el interior del la pantalla del juego y la referencia de la función es una referencia 51 00:04:10,960 --> 00:04:13,600 en este juego sobre la función del controlador, por supuesto. 52 00:04:13,600 --> 00:04:19,450 Entonces, dentro de la pantalla del juego, ahora podemos usar el accesorio onGameOver para ejecutar esta función y pasar 53 00:04:19,450 --> 00:04:22,720 el número de rondas que tomó la computadora para adivinar nuestro 54 00:04:22,720 --> 00:04:29,460 número, luego configuramos este número de rondas aquí, lo almacenamos en nuestro estado de rondas de adivinanzas y ahora en el componente 55 00:04:29,470 --> 00:04:37,480 de la aplicación, sabemos que si las rondas de adivinanzas son cero, el juego aún no ha comenzado o se está ejecutando, si es mayor que 56 00:04:37,480 --> 00:04:40,560 cero, entonces el juego sobre el controlador se ejecuta y 57 00:04:40,720 --> 00:04:41,970 el juego termina. 58 00:04:41,980 --> 00:04:43,840 Por lo tanto, queremos mostrar el juego 59 00:04:43,870 --> 00:04:46,490 en pantalla si las rondas de adivinanzas son mayores que cero. 60 00:04:46,540 --> 00:04:52,180 Por cierto, si comenzamos un nuevo juego, también quiero restablecer mis rondas de conjeturas a cero porque si comienza un 61 00:04:52,180 --> 00:04:52,570 nuevo 62 00:04:52,570 --> 00:04:56,350 juego, queremos restablecer el número de rondas que la computadora tomó a 0. 63 00:04:56,470 --> 00:04:58,600 Entonces, si es mayor que cero, el 64 00:04:58,630 --> 00:05:02,110 juego ha terminado, así que en ese caso, quiero mostrar el juego en pantalla. 65 00:05:02,110 --> 00:05:07,540 Entonces, si verifico si tenemos un número de usuario, en cuyo caso muestro la pantalla del 66 00:05:07,960 --> 00:05:13,110 juego, eso solo es correcto si las rondas de adivinanzas son más pequeñas o iguales 67 00:05:13,120 --> 00:05:16,780 que cero, no es posible, pero aún así, podemos verificarlo. 68 00:05:16,900 --> 00:05:20,770 Entonces, si ese es el caso, entonces sabemos que el juego ciertamente 69 00:05:20,770 --> 00:05:28,650 se está ejecutando, de lo contrario, si las rondas de adivinanzas son mayores que cero, entonces sabemos que el juego ha terminado y, por 70 00:05:28,650 --> 00:05:31,960 lo tanto, el contenido será igual al juego en 71 00:05:31,980 --> 00:05:37,160 pantalla, en este momento eso es solo un componente como este sin ningún accesorio que pasemos. 72 00:05:37,180 --> 00:05:43,270 Entonces, ahora tenemos una condición en la que mostramos el juego en la pantalla, todo lo que tenemos que hacer es usar 73 00:05:43,270 --> 00:05:49,330 el onGameOver Prop aquí en nuestra pantalla del juego para finalmente llamar a esta función y reenviar el número de rondas al 74 00:05:49,330 --> 00:05:51,010 componente de la aplicación . 75 00:05:51,820 --> 00:05:59,510 Entonces, de vuelta en la pantalla del juego, si useEffect aquí determina que se hizo la elección correcta, se hizo la suposición 76 00:05:59,530 --> 00:06:07,120 correcta y, por lo tanto, el juego terminó, luego aquí, quiero llamar a props en GameOver como una función y reenviar la 77 00:06:07,240 --> 00:06:14,380 cantidad de rondas. Tomamos la computadora para adivinar nuestro resultado o nuestra elección y, por lo tanto, ese es otro 78 00:06:14,410 --> 00:06:22,750 estado que tenemos que administrar aquí en la pantalla del juego. Tenemos nuestras rondas y rondas establecidas e inicialmente, eso es cero, 79 00:06:22,810 --> 00:06:32,280 cuando este componente se crea por primera vez, esto es, por supuesto, cero y las rondas es, por lo tanto, ahora lo que reenvío aquí porque 80 00:06:32,290 --> 00:06:37,390 ese es un número que incrementaremos con cada suposición porque en el siguiente controlador 81 00:06:37,390 --> 00:06:43,510 de conjeturas, si estamos generando una próxima conjetura, además de establecer esa conjetura aquí en nuestro estado, 82 00:06:43,540 --> 00:06:51,630 por supuesto, también quiero establecer mis rondas y utilizar la forma de función donde obtengo mis rondas actuales y devuelvo las rondas 83 00:06:51,760 --> 00:06:53,330 actuales mas uno. 84 00:06:53,380 --> 00:06:59,560 Entonces agrego uno a mi cantidad actual de rondas que almaceno en mi estado, para que el nuevo estado sea 85 00:06:59,560 --> 00:07:05,930 rondas antiguas más una porque comenzó una nueva ronda. Entonces, con eso, estamos administrando la cantidad de rondas y estamos usando 86 00:07:05,930 --> 00:07:12,530 esto como una condición en el componente de la aplicación para representar el juego en la pantalla y en la pantalla del juego, verificamos si 87 00:07:12,740 --> 00:07:17,480 el juego está aquí en usoEfecto y en este momento , hacemos esto cada vez que este componente 88 00:07:17,490 --> 00:07:18,690 se vuelve a representar. 89 00:07:19,010 --> 00:07:26,240 Ahora podríamos hacer eso, pero también podemos ser más honestos o más directos con respecto a las dependencias de este efecto 90 00:07:26,270 --> 00:07:31,640 y eso es algo que puede ser o puede hacer agregando un segundo argumento para 91 00:07:31,880 --> 00:07:37,550 usar Effect, el primer argumento es la función que debe ejecutar después de renderizar El componente, 92 00:07:37,560 --> 00:07:41,630 segundo argumento que pasó a useEffect es una matriz de dependencias 93 00:07:41,630 --> 00:07:47,690 de esta función y aquí debe especificar cualquier valor que provenga de fuera de esta función de efecto. 94 00:07:47,690 --> 00:07:53,660 Entonces, en nuestro caso, esa sería la suposición actual y sería la elección del usuario de accesorios y los accesorios en GameOver y cada vez que 95 00:07:54,000 --> 00:07:57,260 dicho valor cambie, este efecto se volverá a ejecutar, siempre que una tarea cambie 96 00:07:57,290 --> 00:08:03,380 después de un ciclo de renderizado, el efecto se volverá a ejecutar. . Si se produjo un ciclo de representación y los valores que 97 00:08:03,380 --> 00:08:06,840 especificó aquí siguen siendo los mismos que para el ciclo de representación anterior, 98 00:08:06,860 --> 00:08:11,300 entonces el efecto no se volverá a ejecutar, por lo que el efecto ahora solo se 99 00:08:11,390 --> 00:08:17,120 volverá a ejecutar si una de nuestras dependencias cambia. Ahora, como dije, la elección del usuario de 100 00:08:17,120 --> 00:08:24,230 utilería y la utilería onGameOver son todas las dependencias y para encargarme de esto, usaré una sintaxis Javascript moderna donde utilizo 101 00:08:24,320 --> 00:08:32,720 la desestructuración de objetos para desestructurar mis utilería y obtener la elección del usuario y onGameOver de ellas, esto La sintaxis puede parecer extraña, pero 102 00:08:32,720 --> 00:08:33,400 es 103 00:08:33,440 --> 00:08:39,500 como la desestructuración de la matriz, solo para los objetos, estamos sacando estas propiedades, por lo que 104 00:08:39,500 --> 00:08:45,860 estos nombres de propiedad de este objeto de utilería y los almacenamos en constantes con nombres iguales para 105 00:08:45,860 --> 00:08:53,930 que aquí podamos usar la elección del usuario y simplemente uso onGameOver ya que ahora tenemos estos valores almacenados en constantes de ese nombre 106 00:08:53,930 --> 00:09:00,350 extraído de los accesorios y estoy haciendo esto porque ahora podemos agregar la elección del usuario y onGameOver como 107 00:09:00,350 --> 00:09:04,340 dependencias en esta lista, de lo contrario tendríamos que agregar accesorios 108 00:09:04,340 --> 00:09:10,370 aquí y eso en realidad cambia cada vez que cambia el componente principal y, por lo tanto, 109 00:09:10,420 --> 00:09:11,990 no es una buena comprobación. 110 00:09:12,050 --> 00:09:16,430 Esta es una mejor verificación porque ahora nos aseguramos de que si algo más cambia en los accesorios, no nos importa, 111 00:09:16,430 --> 00:09:23,300 solo si uno de estos dos valores cambia, entonces este efecto debería volver a ejecutarse. Ahora con eso, tenemos nuestro control en el lugar 112 00:09:23,300 --> 00:09:28,280 que debería llevar a que se presente el juego en pantalla si 113 00:09:28,280 --> 00:09:31,530 la computadora adivinó nuestros números, así que 114 00:09:31,670 --> 00:09:42,580 ahora guardemos esto y probémoslo, tal vez aquí en Android para mezclar las cosas. Así que ingresaré un número aquí, 32, confirmar, iniciar un juego y es 2, por lo que debería ser 115 00:09:42,580 --> 00:09:43,990 mayor, déjenme mostrarles también 116 00:09:43,990 --> 00:09:46,710 cómo se ve la advertencia cuando estoy en Android, 117 00:09:46,750 --> 00:09:50,280 es esta alerta predeterminada de Android. Así que 32 era, por lo 118 00:09:50,290 --> 00:09:53,170 tanto, por supuesto, debería ser mayor, aún debería ser mayor, ahora 119 00:09:53,200 --> 00:09:58,780 debería ser menor, debería ser menor, debería ser mayor, debería ser menor, debería ser menor, debería ser mayor, debería ser mayor, 120 00:09:58,780 --> 00:09:59,780 el El juego ha 121 00:09:59,830 --> 00:10:00,490 terminado. 122 00:10:00,580 --> 00:10:05,590 Se ve bien, la suposición probablemente fue 32, tendría sentido con respecto a la secuencia de números que 123 00:10:05,590 --> 00:10:08,800 teníamos aquí y, por lo tanto, esta salida tiene sentido aquí.