Pourquoi React Hook useState utilise const et not let

33

La manière standard d'utiliser un crochet React useState est la suivante:

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

Cependant, cette const countvariable va clairement être réaffectée à une valeur primitive différente.

Pourquoi alors la variable n'est-elle pas définie comme let count?

Nacho
la source
5
Si vous changez l'état, le composant sera clairement restitué à droite? Donc, s'il restitue, le décompte ne sera jamais "réaffecté"
Kevin.a
3
En effet, dans le cadre de la fonction le décompte reste immuable. Merci Kevin!
Nacho

Réponses:

46

va clairement être réaffecté à une valeur primitive différente

Pas vraiment. Lorsque le composant est restitué, la fonction est exécutée à nouveau, créant une nouvelle étendue, créant une nouvelle countvariable, qui n'a rien à voir avec la variable précédente.

Exemple:

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

Remarque: les crochets sont beaucoup plus sophistiqués et ne sont pas réellement implémentés comme ça. C'est juste pour démontrer un comportement similaire.

Felix Kling
la source
2

const évite de réaffecter la valeur de la référence dans le même domaine.

Depuis MDN

Cela ne signifie pas que la valeur qu'il contient est immuable, mais simplement que l'identificateur de variable ne peut pas être réaffecté.

Aussi

Une constante ne peut pas partager son nom avec une fonction ou une variable dans la même étendue.

Tony
la source
1
Les valeurs primitives sont immuables, donc la question est plutôt d'expliquer comment un nombre const peut changer?
Fred Stark
0

ici, j'ai trouvé que const était frustrant car le nombre doit changer afin

  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
la source