1 00:00:02,380 --> 00:00:06,940 Quindi ora possiamo raggiungere quella schermata di gioco e il computer indovina un 2 00:00:06,970 --> 00:00:12,340 numero qui, un numero casuale che esclude il nostro numero reale per la prima ipotesi iniziale. 3 00:00:12,370 --> 00:00:18,010 Ora dobbiamo assicurarci che possano essere fatte ipotesi successive quando premiamo il pulsante inferiore o superiore qui 4 00:00:18,010 --> 00:00:21,350 nella schermata di gioco. Per questo, aggiungiamo 5 00:00:21,400 --> 00:00:27,820 una funzione all'interno del nostro componente funzionale perché questa funzione avrà bisogno di accedere allo stato circostante 6 00:00:27,820 --> 00:00:36,790 e al componente circostante e assegnargli il nome che desideri, come il prossimo gestore di ipotesi, qualunque sia il nome che preferisci e questa 7 00:00:36,790 --> 00:00:38,700 è una funzione che in 8 00:00:38,710 --> 00:00:43,810 realtà dovresti ottenere un argomento, la direzione in cui dovrebbe essere la prossima 9 00:00:43,810 --> 00:00:47,390 ipotesi, così inferiore o maggiore. Ora la 10 00:00:47,390 --> 00:00:54,060 prima cosa che voglio fare qui è assicurarmi di convalidare la direzione. 11 00:00:54,110 --> 00:00:59,600 Ora questa funzione qui dovrebbe essere eseguita quando vengono premuti i pulsanti in basso ma ovviamente 12 00:00:59,600 --> 00:01:04,970 il valore della direzione, quindi il valore che passiamo come argomento dovrebbe differire in base 13 00:01:05,240 --> 00:01:06,190 al pulsante. 14 00:01:06,200 --> 00:01:13,070 Quindi qui abbiamo il prossimo gestore di ipotesi collegato a onPress, senza parentesi per fornire quel puntatore 15 00:01:13,100 --> 00:01:19,140 alla nostra funzione su onPress in modo che questo venga eseguito alla fine quando l'utente 16 00:01:19,140 --> 00:01:26,060 lo preme ma sono andato a preconfigurare l'argomento che verrà passato al prossimo gestore di ipotesi quando questo 17 00:01:26,060 --> 00:01:27,350 viene eseguito. 18 00:01:27,350 --> 00:01:33,530 Possiamo fare questo con bind, bind this perché il primo argomento da bind è sempre quello a cui questo dovrebbe 19 00:01:33,530 --> 00:01:38,450 riferirsi nella funzione che viene chiamata, non importa qui, quindi possiamo semplicemente associarlo a questo. 20 00:01:38,600 --> 00:01:44,780 Il secondo valore che passiamo qui per associare sarà il primo argomento ricevuto dalla nostra funzione e 21 00:01:44,810 --> 00:01:51,580 quindi, questa sarà la direzione ricevuta qui e ovviamente dipende da te quale logica usi qui, per me 22 00:01:51,580 --> 00:01:52,560 ha senso 23 00:01:52,600 --> 00:02:00,820 usare semplicemente un stringa in cui qui passiamo più in basso come stringa e per l'altro pulsante, passiamo più in modo da 24 00:02:00,970 --> 00:02:02,710 avere questi due identificatori 25 00:02:02,740 --> 00:02:08,830 che vengono essenzialmente passati al gestore dell'ipotesi successiva. Quindi la direzione sarà più bassa o 26 00:02:08,830 --> 00:02:10,780 più grande e 27 00:02:10,900 --> 00:02:14,110 ora vogliamo confermare se ciò è corretto. 28 00:02:14,110 --> 00:02:20,670 Quindi, ad esempio, se hai selezionato un numero di diciamo 55 e il computer ha indovinato 60, quindi se 29 00:02:20,800 --> 00:02:25,390 dai a un computer il suggerimento dei numeri dovrebbe essere maggiore, è ovviamente 30 00:02:25,390 --> 00:02:30,190 sbagliato perché il numero dovrebbe essere più piccolo, il tuo numero era 55, indovina 31 00:02:30,190 --> 00:02:31,690 era 60, non è 32 00:02:31,690 --> 00:02:37,290 corretto se dici al computer che il numero che dovrebbe indovinare dopo dovrebbe essere maggiore di 60, 33 00:02:37,290 --> 00:02:37,790 giusto? 34 00:02:37,810 --> 00:02:39,340 Quindi vogliamo convalidare 35 00:02:39,540 --> 00:02:43,370 questo e quindi qui possiamo verificare se la direzione 36 00:02:43,390 --> 00:02:54,870 è uguale a inferiore, quindi se hai premuto il suo pulsante inferiore e l'attuale ipotesi è più piccola, allora proponi la scelta dell'utente, quindi il computer ha effettivamente 37 00:02:54,880 --> 00:03:01,270 indovinato un numero inferiore a la nostra scelta, quindi inferiore è il suggerimento sbagliato giusto 38 00:03:01,270 --> 00:03:01,870 perché 39 00:03:01,900 --> 00:03:03,900 il numero deve essere inferiore, 40 00:03:03,970 --> 00:03:11,100 deve essere maggiore perché l'ipotesi era già troppo bassa. Quindi questo è uno scenario possibile in cui stiamo 41 00:03:11,100 --> 00:03:16,110 ottenendo un suggerimento sbagliato, l'alternativa e lo avvolgerò tra parentesi per chiarire che 42 00:03:16,110 --> 00:03:18,300 questa è una condizione qui. 43 00:03:18,330 --> 00:03:20,440 Quindi l'alternativa a questa, 44 00:03:20,490 --> 00:03:26,010 la seconda condizione che voglio verificare è che la direzione qui è in realtà 45 00:03:26,250 --> 00:03:30,920 maggiore e allo stesso tempo l'attuale ipotesi è già maggiore della nostra 46 00:03:30,930 --> 00:03:33,460 scelta e quindi è anche un 47 00:03:33,480 --> 00:03:35,600 suggerimento errato, proprio nella direzione opposta. 48 00:03:35,940 --> 00:03:41,220 In entrambi i casi in cui stiamo dando un suggerimento errato, voglio lanciare un avviso e hai imparato che puoi farlo con l'API 49 00:03:41,220 --> 00:03:48,300 di avviso, la classe di avviso che puoi importare da React Native alla fine. Poi qui, nel nostro controllo, userò l'avviso di avviso 50 00:03:48,300 --> 00:03:55,460 per lanciare un avviso con un titolo diciamo non mentire, ovviamente puoi scegliere qualsiasi nome tu voglia, sto sfuggendo 51 00:03:55,530 --> 00:03:57,820 a quella singola citazione che 52 00:03:57,840 --> 00:04:03,240 sono andato a stampare come personaggio qui con una barra rovesciata perché altrimenti chiuderebbe 53 00:04:03,240 --> 00:04:07,710 la stringa perché sto usando virgolette singole per circondare le mie stringhe. 54 00:04:07,710 --> 00:04:09,010 Quindi questo è il 55 00:04:09,090 --> 00:04:13,230 mio titolo e quindi il testo potrebbe essere tu sai che questo è sbagliato ma ovviamente puoi 56 00:04:13,230 --> 00:04:19,480 avere qualsiasi testo tu voglia qui, puoi anche essere meno moralista se vuoi. Ora voglio presentare un pulsante qui e il pulsante 57 00:04:19,480 --> 00:04:25,260 dice che sono già stati spiegati gli oggetti passati a quel terzo array di argomenti quale 58 00:04:25,320 --> 00:04:32,880 avviso riceve e lì il testo potrebbe essere dispiaciuto e lo stile potrebbe essere annullato e non è necessario fornire un 59 00:04:32,880 --> 00:04:39,120 gestore onPress, se non ne fornisci uno, l'unica cosa che accadrà è che facendo clic sul pulsante si 60 00:04:39,120 --> 00:04:41,400 chiuderà l'avviso che va bene. 61 00:04:42,000 --> 00:04:47,550 Quindi qui, stiamo dando all'utente un tocco sulle dita per così dire e assicurandoci che non vengano 62 00:04:47,550 --> 00:04:48,530 forniti suggerimenti 63 00:04:48,600 --> 00:04:50,040 errati e che voglio 64 00:04:50,040 --> 00:04:54,590 tornare qui, quindi voglio interrompere l'esecuzione della funzione se abbiamo un valore così errato. 65 00:04:54,780 --> 00:04:56,580 Se lo superiamo se blocco, 66 00:04:56,580 --> 00:05:01,330 quindi se abbiamo dato un suggerimento corretto, allora vogliamo generare un nuovo numero casuale. 67 00:05:01,920 --> 00:05:06,940 Quindi qui, voglio verificare se la direzione è più bassa e 68 00:05:07,200 --> 00:05:08,850 ora sappiamo che 69 00:05:08,850 --> 00:05:15,810 era corretta, quindi il computer dovrebbe indovinare un numero inferiore al numero precedente, quindi sappiamo che 70 00:05:15,810 --> 00:05:22,170 un nuovo numero casuale dovrebbe essere generato verso un'ipotesi corrente è il limite superiore massimo. 71 00:05:22,200 --> 00:05:29,940 Quindi, quindi, possiamo chiamare generate random tra di nuovo e il numero minimo, probabilmente quello è uno, ma cosa succederebbe 72 00:05:30,060 --> 00:05:32,930 se l'utente già indovinasse un altro 73 00:05:32,940 --> 00:05:39,440 numero in cui dicevamo al computer che era troppo piccolo e quindi avremmo un problema qui 74 00:05:39,540 --> 00:05:44,410 perché il più basso il confine non è sempre uno, e se 75 00:05:44,430 --> 00:05:48,430 l'utente indovinasse 10 e dicessimo di no, dovrebbe essere maggiore? 76 00:05:48,480 --> 00:05:53,670 Bene, allora l'utente indovina 50 e diciamo che dovrebbe essere inferiore a quello, il computer dovrebbe ovviamente e 77 00:05:53,670 --> 00:05:54,410 indovinare di 78 00:05:54,420 --> 00:06:00,240 nuovo, ma non dovrebbe indovinare al di sotto di 10 perché abbiamo già detto che questo è troppo piccolo in precedenza. 79 00:06:00,330 --> 00:06:08,700 Pertanto, il nostro massimo e minimo attuali dovrebbero adeguarsi nel tempo, poiché diamo suggerimenti sul fatto che il numero indovinato dal computer 80 00:06:08,700 --> 00:06:11,080 sia troppo piccolo o troppo grande. 81 00:06:12,130 --> 00:06:16,690 Quindi, quindi, possiamo usare un altro hook fornito da React e questo è l'hook useRef. 82 00:06:16,690 --> 00:06:23,290 Ora potresti conoscere quel hook come hook che ti consente di creare un oggetto che puoi associare agli input, quindi ai 83 00:06:23,350 --> 00:06:28,960 tuoi elementi di input in jsx per avere accesso a loro nel tuo codice e questo è un 84 00:06:28,960 --> 00:06:33,870 modo di usarlo ma useRef ti consente anche fare qualcos'altro che è piuttosto interessante. 85 00:06:34,120 --> 00:06:39,720 Ti consente di definire un valore che sopravvive al rendering del componente, in modo che sopravviva al 86 00:06:39,760 --> 00:06:42,810 fatto che questo componente viene ricostruito ed è 87 00:06:43,120 --> 00:06:48,940 esattamente ciò di cui abbiamo bisogno qui perché vogliamo accedere al minimo e al massimo che possiamo cambiare 88 00:06:49,180 --> 00:06:53,320 ma che non è rigenerato solo perché il componente viene nuovamente visualizzato. 89 00:06:53,320 --> 00:07:00,060 Quindi qui nella parte superiore di questo componente, dopo aver inizializzato lo stato, possiamo creare 90 00:07:00,360 --> 00:07:10,430 una nuova costante, currentLow forse dove useRef è uno e poi un'altra costante, currentHigh dove useRef è 100, questi sono i nostri limiti 91 00:07:10,440 --> 00:07:16,590 iniziali che stiamo usando per il casuale numero e ora possiamo aggiornare questi 92 00:07:17,160 --> 00:07:18,240 riferimenti qui. 93 00:07:18,390 --> 00:07:20,790 Quindi sappiamo che la direzione dovrebbe essere più bassa, cosa 94 00:07:20,790 --> 00:07:27,450 possiamo fare in quel caso, invece di generare immediatamente un nuovo numero, possiamo impostare currentHigh. corrente, perché i riferimenti generati da 95 00:07:27,450 --> 00:07:33,960 React sono oggetti che hanno una proprietà corrente in cui è memorizzato il 96 00:07:33,960 --> 00:07:36,120 valore effettivo, quindi 97 00:07:36,150 --> 00:07:39,320 impostiamo la corrente uguale all'ipotesi corrente. 98 00:07:39,330 --> 00:07:45,570 Quindi quello che stiamo dicendo è se te lo sto dicendo, il numero di computer che hai indovinato è troppo 99 00:07:45,570 --> 00:07:53,610 grande e dovresti indovinarne uno inferiore, quindi conosco questo numero che ho indovinato è il mio attuale Alto, il numero corretto può ' essere più alto 100 00:07:53,610 --> 00:07:55,320 di questo, quindi salvo 101 00:07:55,320 --> 00:07:58,780 il numero che ho appena intuito come il mio massimo attuale. 102 00:07:58,800 --> 00:08:05,160 E ancora, queste costanti di riferimento qui non vengono rigenerate quando questo componente viene creato di 103 00:08:05,160 --> 00:08:11,700 nuovo, invece se sono state inizializzate una volta, un po 'come lo stato in realtà, quindi vengono 104 00:08:11,790 --> 00:08:17,490 memorizzate staccate da quel componente e React riconosce che sono già state inizializzate e 105 00:08:17,490 --> 00:08:22,440 non li rigenererà ma, invece, inizializzerà currentHigh con il valore precedentemente memorizzato. 106 00:08:22,440 --> 00:08:28,240 Quindi è un po 'come se lo stessi gestendo in uno stato, la differenza rispetto allo stato invece se si modifica 107 00:08:28,240 --> 00:08:32,290 il valore memorizzato in esso, il componente non ricalca perché non lo vogliamo qui. 108 00:08:32,370 --> 00:08:37,890 Non voglio renderizzare nuovamente il componente solo perché sto salvando un nuovo massimo, che non ha alcun impatto sulla mia 109 00:08:37,890 --> 00:08:39,780 vista, sul mio codice jsx, ha 110 00:08:39,780 --> 00:08:44,020 solo un impatto sulla mia logica ma per quello, non lo faccio è necessario rieseguire 111 00:08:44,070 --> 00:08:47,580 il rendering del componente, ecco perché utilizzo qui un riferimento anziché uno stato. 112 00:08:47,640 --> 00:08:50,730 Quindi succede se è inferiore, altrimenti, quindi se 113 00:08:50,760 --> 00:08:55,980 dicessimo al computer che l'ipotesi era troppo piccola e il numero effettivo dovrebbe 114 00:08:55,980 --> 00:08:57,060 essere più alto, 115 00:08:57,060 --> 00:09:04,970 dovrebbe essere maggiore, beh in quel caso impostiamo il minimo corrente sull'ipotesi corrente perché allora sappiamo abbiamo un limite 116 00:09:04,970 --> 00:09:06,020 inferiore. 117 00:09:06,230 --> 00:09:12,230 E ora l'obiettivo è o il trucco è generare un nuovo numero casuale che tenga conto di questi confini, 118 00:09:12,230 --> 00:09:13,280 quindi dove usiamo 119 00:09:13,280 --> 00:09:22,190 il minimo corrente con il nostro riferimento e poi. corrente come minimo e corrente Alta. corrente al massimo e voglio 120 00:09:22,190 --> 00:09:30,850 escludere l'attuale ipotesi, quindi non possiamo indovinare di nuovo lo stesso numero qui, in modo che per 121 00:09:30,850 --> 00:09:38,440 il prossimo ruolo, avremo sicuramente un numero diverso. Quindi è qualcosa che conservo in un numero successivo costante, questo 122 00:09:38,440 --> 00:09:39,900 viene generato qui quando 123 00:09:39,910 --> 00:09:41,200 viene eseguito il 124 00:09:41,350 --> 00:09:46,020 gestore di ipotesi successivo che si verifica quando si tocca uno di questi pulsanti. 125 00:09:46,240 --> 00:09:49,140 E ora il prossimo numero è il prossimo numero 126 00:09:49,150 --> 00:09:54,370 che vogliamo usare, quindi ora ciò che possiamo semplicemente fare come possiamo chiamare impostare ipotesi corrente e aggiungere 127 00:09:54,370 --> 00:10:01,660 il prossimo numero, ora il componente verrà ridigitato e genererà la prossima ipotesi. Quindi proviamo, per ora non abbiamo il gioco 128 00:10:01,660 --> 00:10:02,960 finito ma 129 00:10:02,980 --> 00:10:06,820 almeno possiamo provare a indovinare i numeri qui. 130 00:10:06,850 --> 00:10:09,250 Quindi inserisco 53 come numero, ora 131 00:10:09,250 --> 00:10:12,040 iniziamo e il computer ha indovinato 85. 132 00:10:12,100 --> 00:10:18,220 Se ora dico di più, riceviamo quell'avvertimento perché abbiamo mentito, avevamo 53 come numero, quindi l'ipotesi è troppo 133 00:10:18,220 --> 00:10:21,590 alta, dovrebbe essere inferiore. 134 00:10:21,610 --> 00:10:23,260 Ora sono 28, beh, è troppo basso, dovrebbe essere maggiore. 135 00:10:23,260 --> 00:10:28,830 Quindi, se tocco più in basso, ricevo l'avvertimento, se tocco più in alto, saliamo ora 78 e 136 00:10:28,840 --> 00:10:34,030 ora in questo momento, 23, la supposizione precedente sarà il nostro limite inferiore e ora quando 137 00:10:34,030 --> 00:10:38,360 tocco più in basso, 78 la supposizione attuale sarà il nostro limite superiore, 138 00:10:38,380 --> 00:10:44,300 quindi la prossima ipotesi non sarà certamente al di sopra di 78 e non al di sotto di 139 00:10:44,430 --> 00:10:46,690 23 ma è ancora troppo bassa, è 140 00:10:46,690 --> 00:10:48,460 troppo grande voglio dire, è 141 00:10:48,460 --> 00:10:49,580 troppo bassa quindi 142 00:10:49,600 --> 00:10:51,520 usiamo una maggiore, una più bassa 143 00:10:51,520 --> 00:10:53,460 e che sarebbe quella corretta . 144 00:10:53,500 --> 00:10:53,850 Ora 145 00:10:53,860 --> 00:10:56,560 per ora non abbiamo nulla che controlli se il 146 00:10:56,580 --> 00:10:57,820 computer ha indovinato correttamente. 147 00:10:58,120 --> 00:11:00,130 Quindi questa è la prossima cosa che dovremo implementare qui.