Questa è la terza parte della continuazione della mia serie di apprendimento reattivo , in cui pubblico un articolo settimanale dei miei progressi di apprendimento reattivo e condivido risorse e materiale che mi sono stati utili e mi hanno aiutato a comprendere meglio i concetti e a migliorare le mie capacità di javascript.

Seguendo il percorso di apprendimento che ho preparato per me stesso, Hooks è stato il prossimo sul tavolo, ho coperto gli hook di base e devo conoscere questa settimana e tratterò gli hook avanzati e gli hook personalizzati nelle prossime settimane. I ganci che sono trattati in questo articolo sono,

1. UsaStato
2. UsaEffetto
3. UseContext
4. Usa Riduttore

Programmazione Funzionale

Che cos'è la programmazione funzionale?

Secondo FreeCodeCamp, la programmazione funzionale è uno stile di programmazione in cui le soluzioni sono semplici funzioni isolate , senza alcun effetto collaterale al di fuori dell'ambito della funzione.

• Funzione isolata: ciò significa che non c'è dipendenza dallo stato del programma, che include variabili globali soggette alla modifica, quindi la funzione funziona in isolamento e svolge solo il lavoro che è stato assegnato loro da un programmatore.
• Semplice funzione pura: lo stesso input fornisce sempre lo stesso output.
• Le funzioni hanno effetti collaterali non limitati o limitati: Eventuali modifiche allo stato dell'intero programma al di fuori della funzione sono controllate in un senso che non influisce sulla funzione o sul suo funzionamento.
• La programmazione funzionale ha un modello di programmazione stateless .

Tornando a Hooks...

Cosa sono gli Hook?

Secondo la reazione dei documenti ufficiali,

"Gli hook sono una nuova aggiunta a React nella versione 16.8 che consente di utilizzare lo stato e altre funzionalità di React, come i metodi del ciclo di vita, senza scrivere una classe."

I componenti funzionali in React non sono altro che un paradigma di programmazione funzionale che isola la funzione l'una dall'altra in modo che possano eseguire le proprie azioni senza alcuna interferenza dal mondo esterno.

I 4 Ganci più utilizzati.

1. usaStato()

• Che cos'è l'hook useState()? È un hook che consente di avere variabili di stato nei componenti funzionali, si passa lo stato iniziale a questa funzione e restituisce una variabile con il valore dello stato corrente e un'altra funzione per aggiornare questo valore quando lo schermo esegue nuovamente il rendering.
• Cosa passiamo a useState()? l'argomento utilizzato da useState() è uno stato iniziale, può essere un numero o una stringa se è quello che ti serve.
• Cosa fa useState return()? Restituisce due valori, lo stato corrente e una funzione per aggiornare lo stato corrente, controlla l'esempio seguente.

const [foo, setFoo] = useState('bar')

2. useEffect()

Secondo il documentario ufficiale, l'effetto hook ti consente di eseguire effetti collaterali nel componente della funzione. In breve, il compito che avviene al di fuori della normale valutazione dei componenti e rende il ciclo.

Gestiamo questi effetti separatamente in modo che questi effetti collaterali non interrompano il normale rendering dell'interfaccia utente del componente di reazione.

useEffecct( () => {...}, []

1. Una funzione che dovrebbe essere eseguita dopo ogni valutazione del componente, è dove va il codice degli effetti collaterali.
2. Il secondo argomento è un array, noto come array di dipendenze, il primo argomento, ad esempio la funzione, verrà eseguito solo se le dipendenze menzionate vengono modificate.

useEffect(() => {
    effect
    return () => {
        cleanup
    }
}, [])

3. useContext()

Il contesto fornisce un modo per passare i dati attraverso l'albero dei componenti senza dover passare manualmente gli oggetti di scena a tutti i livelli. Sì, è semplicemente questo.

Tre passaggi per creare un hook useContext(),

• Crea contesto: const creationContext = React.createContext(null);
• Avvolgere con provider e passare il valore di contesto, il valore da trasmettere.
• Esporta: esporta la creazione di un contesto predefinito

4. useReducer()

Oh ragazzo! questo mi ha impiegato giorni per superare la parte in cui posso implementarlo da solo, tuttavia, farò del mio meglio per rendere almeno la parte teorica più facile per te.

• useReducer è un hook utilizzato per la gestione dello stato.
• È un'alternativa a useState, infatti, l'hook useState viene compilato utilizzando useReducer.
• Il suo funzionamento è molto correlato alla funzione array riduttore di javascript.

const [count, dispatch] = useReducer(reducer, initialState)

1. dispatch, viene utilizzato per inviare una nuova azione. Questa è una funzione che viene attivata automaticamente una volta che un'azione viene inviata tramite la funzione di riduzione, riceve l'ultima istantanea dello stato e restituisce uno stato nuovo e aggiornato.

• useReducer, definisce uno stato iniziale.
• Fornire una funzione che contenga azioni che aggiornano lo stato.
• Attiva l'invio di uno stato aggiornato calcolato in relazione allo stato iniziale.

Secondo css-tricks , "Se il tuo unico elemento del tuo stato si basa sul valore di un altro elemento del tuo stato, allora è quasi sempre usare useReducer"

La regola pratica può essere quella di utilizzare useReducer per gestire stati complessi, in particolare quando lo stato iniziale si basa sullo stato di altri elementi.

Spero che questo articolo ti abbia fornito le basi dei ganci di reazione e da qui puoi cercare alcuni esempi di sandbox e avere una migliore comprensione. Di seguito allego alcuni riferimenti dettagliati ad alcuni articoli per tutti gli hook che ho citato, dove puoi guardare esempi più complessi e una comprensione più profonda di particolari hook.

[1]https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/

[2]https://medium.com/swlh/react-hook-a-guide-to-learning-useeffect-11687e777aeb

[3]https://www.robinwieruch.de/react-usecontext-hook

[4]https://css-tricks.com/getting-to-know-the-usereducer-react-hook/