React Hooks: più facile di quanto pensi.

A volte imparare cose nuove può essere opprimente e noioso. Tuttavia, questo non è il caso di React Hooks . Se sei una persona che non ha mai avuto il tempo di imparare gli Hooks e usi principalmente componenti basati sulla classe d, potrebbe essere il momento di provarlo.

Quando ho imparato per la prima volta React , ho usato solo componenti basati sulla classe perché è ciò che mi è stato insegnato e con cui ho più familiarità. Tuttavia, sebbene sia utile sapere come utilizzare i componenti basati su Blass, sono "obsoleti". Il settore è e continuerà lungo il percorso di utilizzo di componenti basati su funzioni .

Gli hook sono stati creati come un modo per utilizzare i metodi del ciclo di vita della classe e lo stato all'interno delle funzioni. Ciò elimina essenzialmente la necessità di componenti basati su classi in generale.

Il modo più semplice per dimostrarlo è esaminare lo stato in un componente basato su classi :

I quattro punti principali da considerare sono:

• Lo stato è inizializzato da state: {}.
• Le Thisparole chiave per il targeting di funzioni e variabili in Classi .
• La necessità delle funzioni freccia per evitare errori con la thisparola chiave nei componenti basati su classi .
• setState()per eventuali cambiamenti di Stato .

La prima cosa che dovresti notare immediatamente è che non c'è Classe .

La seconda cosa subito dopo è il modo in cui inizializziamo State :

scomponiamolo in termini semplici:

• termè ciò che il tuo Stato è attualmente in un dato momento. Invece di scrivere this.state.termsarebbe solo term.
• setTermè essenzialmente setStatetranne con un nome più personalizzato. funziona esattamente allo stesso modo, puoi semplicemente scegliere come chiamarlo.
• useStateè un gancio. lo scopo è inizializzare a cosa dovrebbe essere uguale una certa chiave in State . Poiché stiamo usando una stringa, inizializziamo una stringa vuota.