Quindi ora possiamo raggiungere quella schermata di gioco e il computer indovina un
numero qui, un numero casuale che esclude il nostro numero reale per la prima ipotesi iniziale.
Ora dobbiamo assicurarci che possano essere fatte ipotesi successive quando premiamo il pulsante inferiore o superiore qui
nella schermata di gioco. Per questo, aggiungiamo
una funzione all'interno del nostro componente funzionale perché questa funzione avrà bisogno di accedere allo stato circostante
e al componente circostante e assegnargli il nome che desideri, come il prossimo gestore di ipotesi, qualunque sia il nome che preferisci e questa
è una funzione che in
realtà dovresti ottenere un argomento, la direzione in cui dovrebbe essere la prossima
ipotesi, così inferiore o maggiore. Ora la
prima cosa che voglio fare qui è assicurarmi di convalidare la direzione.
Ora questa funzione qui dovrebbe essere eseguita quando vengono premuti i pulsanti in basso ma ovviamente
il valore della direzione, quindi il valore che passiamo come argomento dovrebbe differire in base
al pulsante.
Quindi qui abbiamo il prossimo gestore di ipotesi collegato a onPress, senza parentesi per fornire quel puntatore
alla nostra funzione su onPress in modo che questo venga eseguito alla fine quando l'utente
lo preme ma sono andato a preconfigurare l'argomento che verrà passato al prossimo gestore di ipotesi quando questo
viene eseguito.
Possiamo fare questo con bind, bind this perché il primo argomento da bind è sempre quello a cui questo dovrebbe
riferirsi nella funzione che viene chiamata, non importa qui, quindi possiamo semplicemente associarlo a questo.
Il secondo valore che passiamo qui per associare sarà il primo argomento ricevuto dalla nostra funzione e
quindi, questa sarà la direzione ricevuta qui e ovviamente dipende da te quale logica usi qui, per me
ha senso
usare semplicemente un stringa in cui qui passiamo più in basso come stringa e per l'altro pulsante, passiamo più in modo da
avere questi due identificatori
che vengono essenzialmente passati al gestore dell'ipotesi successiva. Quindi la direzione sarà più bassa o
più grande e
ora vogliamo confermare se ciò è corretto.
Quindi, ad esempio, se hai selezionato un numero di diciamo 55 e il computer ha indovinato 60, quindi se
dai a un computer il suggerimento dei numeri dovrebbe essere maggiore, è ovviamente
sbagliato perché il numero dovrebbe essere più piccolo, il tuo numero era 55, indovina
era 60, non è
corretto se dici al computer che il numero che dovrebbe indovinare dopo dovrebbe essere maggiore di 60,
giusto?
Quindi vogliamo convalidare
questo e quindi qui possiamo verificare se la direzione
è 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
indovinato un numero inferiore a la nostra scelta, quindi inferiore è il suggerimento sbagliato giusto
perché
il numero deve essere inferiore,
deve essere maggiore perché l'ipotesi era già troppo bassa. Quindi questo è uno scenario possibile in cui stiamo
ottenendo un suggerimento sbagliato, l'alternativa e lo avvolgerò tra parentesi per chiarire che
questa è una condizione qui.
Quindi l'alternativa a questa,
la seconda condizione che voglio verificare è che la direzione qui è in realtà
maggiore e allo stesso tempo l'attuale ipotesi è già maggiore della nostra
scelta e quindi è anche un
suggerimento errato, proprio nella direzione opposta.
In entrambi i casi in cui stiamo dando un suggerimento errato, voglio lanciare un avviso e hai imparato che puoi farlo con l'API
di avviso, la classe di avviso che puoi importare da React Native alla fine. Poi qui, nel nostro controllo, userò l'avviso di avviso
per lanciare un avviso con un titolo diciamo non mentire, ovviamente puoi scegliere qualsiasi nome tu voglia, sto sfuggendo
a quella singola citazione che
sono andato a stampare come personaggio qui con una barra rovesciata perché altrimenti chiuderebbe
la stringa perché sto usando virgolette singole per circondare le mie stringhe.
Quindi questo è il
mio titolo e quindi il testo potrebbe essere tu sai che questo è sbagliato ma ovviamente puoi
avere qualsiasi testo tu voglia qui, puoi anche essere meno moralista se vuoi. Ora voglio presentare un pulsante qui e il pulsante
dice che sono già stati spiegati gli oggetti passati a quel terzo array di argomenti quale
avviso riceve e lì il testo potrebbe essere dispiaciuto e lo stile potrebbe essere annullato e non è necessario fornire un
gestore onPress, se non ne fornisci uno, l'unica cosa che accadrà è che facendo clic sul pulsante si
chiuderà l'avviso che va bene.
Quindi qui, stiamo dando all'utente un tocco sulle dita per così dire e assicurandoci che non vengano
forniti suggerimenti
errati e che voglio
tornare qui, quindi voglio interrompere l'esecuzione della funzione se abbiamo un valore così errato.
Se lo superiamo se blocco,
quindi se abbiamo dato un suggerimento corretto, allora vogliamo generare un nuovo numero casuale.
Quindi qui, voglio verificare se la direzione è più bassa e
ora sappiamo che
era corretta, quindi il computer dovrebbe indovinare un numero inferiore al numero precedente, quindi sappiamo che
un nuovo numero casuale dovrebbe essere generato verso un'ipotesi corrente è il limite superiore massimo.
Quindi, quindi, possiamo chiamare generate random tra di nuovo e il numero minimo, probabilmente quello è uno, ma cosa succederebbe
se l'utente già indovinasse un altro
numero in cui dicevamo al computer che era troppo piccolo e quindi avremmo un problema qui
perché il più basso il confine non è sempre uno, e se
l'utente indovinasse 10 e dicessimo di no, dovrebbe essere maggiore?
Bene, allora l'utente indovina 50 e diciamo che dovrebbe essere inferiore a quello, il computer dovrebbe ovviamente e
indovinare di
nuovo, ma non dovrebbe indovinare al di sotto di 10 perché abbiamo già detto che questo è troppo piccolo in precedenza.
Pertanto, il nostro massimo e minimo attuali dovrebbero adeguarsi nel tempo, poiché diamo suggerimenti sul fatto che il numero indovinato dal computer
sia troppo piccolo o troppo grande.
Quindi, quindi, possiamo usare un altro hook fornito da React e questo è l'hook useRef.
Ora potresti conoscere quel hook come hook che ti consente di creare un oggetto che puoi associare agli input, quindi ai
tuoi elementi di input in jsx per avere accesso a loro nel tuo codice e questo è un
modo di usarlo ma useRef ti consente anche fare qualcos'altro che è piuttosto interessante.
Ti consente di definire un valore che sopravvive al rendering del componente, in modo che sopravviva al
fatto che questo componente viene ricostruito ed è
esattamente ciò di cui abbiamo bisogno qui perché vogliamo accedere al minimo e al massimo che possiamo cambiare
ma che non è rigenerato solo perché il componente viene nuovamente visualizzato.
Quindi qui nella parte superiore di questo componente, dopo aver inizializzato lo stato, possiamo creare
una nuova costante, currentLow forse dove useRef è uno e poi un'altra costante, currentHigh dove useRef è 100, questi sono i nostri limiti
iniziali che stiamo usando per il casuale numero e ora possiamo aggiornare questi
riferimenti qui.
Quindi sappiamo che la direzione dovrebbe essere più bassa, cosa
possiamo fare in quel caso, invece di generare immediatamente un nuovo numero, possiamo impostare currentHigh. corrente, perché i riferimenti generati da
React sono oggetti che hanno una proprietà corrente in cui è memorizzato il
valore effettivo, quindi
impostiamo la corrente uguale all'ipotesi corrente.
Quindi quello che stiamo dicendo è se te lo sto dicendo, il numero di computer che hai indovinato è troppo
grande e dovresti indovinarne uno inferiore, quindi conosco questo numero che ho indovinato è il mio attuale Alto, il numero corretto può ' essere più alto
di questo, quindi salvo
il numero che ho appena intuito come il mio massimo attuale.
E ancora, queste costanti di riferimento qui non vengono rigenerate quando questo componente viene creato di
nuovo, invece se sono state inizializzate una volta, un po 'come lo stato in realtà, quindi vengono
memorizzate staccate da quel componente e React riconosce che sono già state inizializzate e
non li rigenererà ma, invece, inizializzerà currentHigh con il valore precedentemente memorizzato.
Quindi è un po 'come se lo stessi gestendo in uno stato, la differenza rispetto allo stato invece se si modifica
il valore memorizzato in esso, il componente non ricalca perché non lo vogliamo qui.
Non voglio renderizzare nuovamente il componente solo perché sto salvando un nuovo massimo, che non ha alcun impatto sulla mia
vista, sul mio codice jsx, ha
solo un impatto sulla mia logica ma per quello, non lo faccio è necessario rieseguire
il rendering del componente, ecco perché utilizzo qui un riferimento anziché uno stato.
Quindi succede se è inferiore, altrimenti, quindi se
dicessimo al computer che l'ipotesi era troppo piccola e il numero effettivo dovrebbe
essere più alto,
dovrebbe essere maggiore, beh in quel caso impostiamo il minimo corrente sull'ipotesi corrente perché allora sappiamo abbiamo un limite
inferiore.
E ora l'obiettivo è o il trucco è generare un nuovo numero casuale che tenga conto di questi confini,
quindi dove usiamo
il minimo corrente con il nostro riferimento e poi. corrente come minimo e corrente Alta. corrente al massimo e voglio
escludere l'attuale ipotesi, quindi non possiamo indovinare di nuovo lo stesso numero qui, in modo che per
il prossimo ruolo, avremo sicuramente un numero diverso. Quindi è qualcosa che conservo in un numero successivo costante, questo
viene generato qui quando
viene eseguito il
gestore di ipotesi successivo che si verifica quando si tocca uno di questi pulsanti.
E ora il prossimo numero è il prossimo numero
che vogliamo usare, quindi ora ciò che possiamo semplicemente fare come possiamo chiamare impostare ipotesi corrente e aggiungere
il prossimo numero, ora il componente verrà ridigitato e genererà la prossima ipotesi. Quindi proviamo, per ora non abbiamo il gioco
finito ma
almeno possiamo provare a indovinare i numeri qui.
Quindi inserisco 53 come numero, ora
iniziamo e il computer ha indovinato 85.
Se ora dico di più, riceviamo quell'avvertimento perché abbiamo mentito, avevamo 53 come numero, quindi l'ipotesi è troppo
alta, dovrebbe essere inferiore.
Ora sono 28, beh, è troppo basso, dovrebbe essere maggiore.
Quindi, se tocco più in basso, ricevo l'avvertimento, se tocco più in alto, saliamo ora 78 e
ora in questo momento, 23, la supposizione precedente sarà il nostro limite inferiore e ora quando
tocco più in basso, 78 la supposizione attuale sarà il nostro limite superiore,
quindi la prossima ipotesi non sarà certamente al di sopra di 78 e non al di sotto di
23 ma è ancora troppo bassa, è
troppo grande voglio dire, è
troppo bassa quindi
usiamo una maggiore, una più bassa
e che sarebbe quella corretta .
Ora
per ora non abbiamo nulla che controlli se il
computer ha indovinato correttamente.
Quindi questa è la prossima cosa che dovremo implementare qui.