Prima di entrare in Hooks...

Prima di entrare nelle basi degli Hooks, è importante capire come ci siamo entrati. Come forse saprai, React ti consente di utilizzare due strutture Javascript per definire i componenti: Funzioni o Classi .

1️⃣ Classe:

• Componente di classe: una classe JavaScript che include un metodo di rendering che restituisce l'interfaccia utente. Può anche impostare lo stato nella sua funzione di costruttore e gestire lo stato ed eseguire effetti collaterali nei suoi metodi del ciclo di vita.
• Componente puro: differisce da un componente di classe poiché ha implementato un metodo shouldComponentUpdate, con una prop e un confronto di stato poco profondi. Per valori semplici, evita inutili re-render, ma per oggetti complessi e profondi, può produrre falsi negativi.
• Componente senza stato : una classe JavaScript senza alcuna gestione dello stato.

2️⃣ Funzione:

• Componente senza stato: semplice funzione JavaScript a cui vengono passate proprietà e restituisce l'interfaccia utente.
• Componente funzione: una funzione JavaScript che riceve proprietà, che utilizza hook per gestire lo stato, eseguire effetti collaterali e restituire l'interfaccia utente.

Prima di React Hooks, non c'era modo di avere uno stato di gestione del componente funzione.

I componenti della funzione sono nati con la necessità di avere componenti senza stato con la capacità di tenere traccia dei valori nel componente e allo stesso tempo mantenere lo stato e l'interfaccia utente sincronizzati.

E ora... Entriamo negli hook!

Per prima cosa, un hook è una funzione semplice. Nel seguente post passeremo attraverso i seguenti hook: useState , useEffect , useSelector , useDispatch e useRef ✌️.

useState (Reagire)

• Assegna a React la responsabilità di gestire un valore di stato.
• R eturns un array di due elementi: valore corrente e una funzione di aggiornamento.const [value, setValue] = useState(initialValue)
• Per impostare un valore iniziale per la variabile, passare il valore iniziale come argomento alla funzione useState .
• Per impostare un nuovo valore, utilizzare la funzione di aggiornamento. Il nuovo valore sostituisce quello vecchio ↝ Quando il valore dello stato cambia, React sa che avrà bisogno di una nuova versione dell'interfaccia utente ↝ render.setValue(newValue)
• Differisce dal componente di classe setState che unisce lo stato con quello nuovo, invece di ricevere un solo valore.
• Per aggiornare un valore di stato in base al suo valore precedente, invece di passare alla funzione di aggiornamento un valore da impostare, puoi passare una funzione. React passerà a quella funzione il valore di stato corrente e utilizzerà il valore di ritorno di quella funzione come nuovo valore di stato. Esempio
• Fai attenzione quando hai a che fare con objects. Assicurati di copiare le proprietà invariate dallo stato precedente quando la funzione di aggiornamento sta aggiornando solo un sottoinsieme delle proprietà.setValue(state => { return {...state, property: newValue} })

• Utilizzato per eseguire effetti collaterali, come ad esempio effettuare chiamate API o lavorare con timeout.
• Il primo argomento della funzione useEffect è l'effetto stesso e il secondo è l'elenco delle dipendenze.useEffect(() => { Effect goes here }, dependencyList);
• React determina se eseguire un effetto controllando se i valori nell'elenco delle dipendenze sono cambiati dall'ultima volta che il componente ha chiamato l'effetto.
• Quando useEffect viene chiamato senza un secondo argomento, React esegue l'effetto dopo ogni rendering.
• Quando useEffect viene utilizzato con un array vuoto passato come secondo argomento, React esegue l'effetto solo una volta, quando il componente viene montato. Impostando l'elenco delle dipendenze su un array vuoto, l'elenco non cambierà mai, quindi l'effetto viene eseguito solo una volta (primi montaggi).
• Per ripulire gli effetti, restituire una funzione dall'effetto. React verrà eseguito prima di eseguire nuovamente la funzione dell'effetto e quando il componente viene smontato. Perché dobbiamo farlo? Per evitare perdite di memoria quando ci si iscrive più volte ai listener di eventi.

😉 Ricapitolazione dei riferimenti … I riferimenti forniscono un modo per accedere ai nodi DOM o agli elementi React creati nel metodo di rendering. Potrebbe essere utile per gestire il focus o le animazioni.

• Responsabile della creazione di un oggetto ref mutabile, la cui currentproprietà corrisponde al valore di riferimento del nodo e può essere inizializzato con un valore iniziale.const refContainer = useRef(initialValue);
• L'oggetto restituito persisterà per l'intera durata del componente.
• Se passi un oggetto ref all'elemento React, ad esempio <div ref={myRef} />, React imposterà la sua .currentproprietà al nodo DOM corrispondente ogni volta che quel nodo cambia.
• useRef ti darà lo stesso oggetto ref su ogni rendering e non attiverà alcun re-rendering.

Solo se conosci React-Redux ⚠️

• Responsabile per ottenere i dati dal negozio Redux in un componente React.
• È equivalente a MapStateToProps in Class Component.
• Accetta due argomenti: una funzione che restituisce lo stato o parte dello stato, chiamata selector e una funzione che controlla se lo stato precedente e quello corrente sono uguali per verificare se è necessario un aggiornamento (opzionale).const result = useSelector(selector, equalityFunction?)
• Il selettore verrà chiamato con l'intero stato del negozio Redux come unico argomento.
• Il selettore verrà eseguito ogni volta che il componente della funzione esegue il rendering.
• Il selettore verrà eseguito ogni volta che viene inviata un'azione.
• La funzione di confronto uguaglianza forza un nuovo rendering solo se il risultato del selettore sembra essere diverso dall'ultimo risultato. Potresti usare la funzione shallowEqual dalla libreria React-Redux, per esempio.

Solo se conosci React-Redux ⚠️

• Restituisce un riferimento alla funzione di invio dall'archivio Redux. const dispatch = useDispatch()
• Puoi usarlo per inviare le azioni necessarie. dispatch({type: ACTION_TYPE_EXAMPLE, payload: dummy})
• È l'equivalente di MapDispatchToProps in Class Component.

• Meno codice e migliore organizzazione del codice
• Componenti più facilmente testabili
• Estrazione di funzionalità a funzioni esterne che possono essere riutilizzate e condivise
• Modello del ciclo di vita più semplice, mentre il codice degli effetti collaterali di Class Components è suddiviso in più metodi del ciclo di vita (componentDidMount, componentWillUnmount, componentWillUpdate)
• Non è necessario chiamare super() in un costruttore di classi
• Non è necessario lavorare con questo e associare i gestori e iniziare a sfruttare la chiusura di javascript.

Riferimenti:

Reagire ganci in azione

di John Larsen

Blog di sviluppo

https://dev.to/vitaliemaldur/resize-event-listener-using-react-hooks-1k0c