React Hooks ti consente di utilizzare lo stato e altre funzionalità di React senza dover creare un componente di classe React. Usando gli hook, puoi costruire applicazioni React completamente operative esclusivamente con Function Components. Non più class Example extends React.component {}richiesto.

Ganci di base

Ganci quotidiani per casi d'uso quotidiani.

React Basic Hooks
- useEffect
- useState => Questo articolo
- useContext => Prossimamente

useState

Documentazione ufficiale per l'usoStato

const [state, setState] = useState(initialState);

1. Stato iniziale

Un array contenente due valori.

1. Stato più recente
2. Funzione per aggiornare lo stato a nuovi valori

useStateaccetta un valore iniziale e restituisce due valori: stato più recente e una funzione per aggiornare lo stato. I valori vengono restituiti sotto forma di un array e vengono comunemente letti utilizzando la sintassi di destrutturazione dell'array .

setStateè una funzione asincrona, quindi è fondamentale tenere presente che il completamento potrebbe richiedere del tempo. A volte un nuovo stato richiede il calcolo dello stato precedente. Il calcolo di un nuovo stato basato su uno stato precedente può essere eseguito passando una funzione al setStatemetodo fornito nel secondo [1]argomento (nell'array javascript) dell'array restituito. È importante assicurarsi che useStatele funzioni e useEffectvengano eseguite ogni volta nello stesso ordine. Se le funzioni useStatee useEffectnon si attivano nello stesso ordine, ti divertirai molto (maggiori informazioni sull'esecuzione dell'ordinamento corretto di seguito). Nei calcoli accurati verrà restituito quando l'ordine della funzione non viene mantenuto.

Esempi

Comprensione useStatedei valori restituiti.

Il codice seguente può essere espresso in più modi.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Cambiare gli orsi in tori.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

Il codice seguente aggiungerà 27 allo stato precedente.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Comprensione dell'inizializzazione pigra delle variabili di stato. Spiegazione ufficiale di React Docs.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Sito web personale
LinkedIn
Instagram