Perché React Hook useState usa const e non let

33

Il modo standard di utilizzare un React use Hook di stato è il seguente:

const [count, setCount] = useState(0);

Tuttavia, questa const countvariabile verrà chiaramente riassegnata a un diverso valore di base.

Perché allora la variabile non è definita come let count?

— Nacho
fonte

5

Se si modifica lo stato, il componente verrà nuovamente visualizzato correttamente, giusto? Quindi, se si esegue nuovamente il rendering, il conteggio non verrà mai "riassegnato"

— Kevin.a

3

In effetti, nell'ambito del conteggio delle funzioni rimane immutabile. Grazie Kevin!

— Nacho,

46

chiaramente verrà riassegnato a un diverso valore primitivo

Non proprio. Quando viene restituito il componente, la funzione viene eseguita di nuovo, creando un nuovo ambito, creando una nuova countvariabile, che non ha nulla a che fare con la variabile precedente.

Esempio:

let _state;
let _initialized = false;
function useState(initialValue) {
  if (!_initialized) {
    _state = initialValue;
    _initialized = true;
  }
  return [_state, v => _state = v];
}

function Component() {
  const [count, setCount] = useState(0);

  console.log(count);
  setCount(count + 1);
}

Component();
Component(); // in reality `setCount` somehow triggers a rerender, calling Component again
Component(); // another rerender

Espandi frammento

Nota: gli hook sono molto più sofisticati e non sono effettivamente implementati in questo modo. Questo è solo per dimostrare un comportamento simile.

— Felix Kling
fonte

2

const è una guardia contro la riassegnazione del valore del riferimento all'interno dello stesso ambito.

Da MDN

Non significa che il valore che detiene sia immutabile, ma solo che l'identificatore di variabile non può essere riassegnato.

Anche

Una costante non può condividere il suo nome con una funzione o una variabile nello stesso ambito.

— tony
fonte

1

I valori primitivi sono immutabili, quindi la domanda è di più su come mai come può cambiare un numero const?

— Fred Stark,

0

Dopo aver chiamato setCount, il componente viene restituito e la nuova chiamata di useState restituisce il nuovo valore. Il punto è che il conteggio è immutabile. Quindi non c'è errore di battitura qui.

Tecnicamente è una nuova variabile ad ogni rendering.

Fonte: React Problema di Github: Docs - Hooks: è const un errore di battitura?

— Abido
fonte

0

qui ho scoperto che const era frustrante poiché il conteggio ha dovuto cambiare così

  let [count, setCount] = useState(0)
  // simply can't use ++ on either side of count increment given we declare as const [count, setCount] 
  // instead declaration of var or let [count, setCount] allows simpler code
  const increment = () => {
    setCount(count++); //const cannot do this only let or var
  };

— urfx
fonte