Utilisation de const pour déclarer la fonction useState

Question

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

  function increase() {
    setCount(count + 1);
    console.log(count);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>
  );
}

Lorsque je console.log la valeur de count, elle augmente de 1 bien que je l'ai déclarée en utilisant const. Comment se fait-il qu'il soit encore mis à jour ? J'ai l'impression que c'est lié à la fonction useState, mais je n'en suis pas sûr.

Par ailleurs, si nous pouvons mettre à jour en utilisant count + 1 pourquoi ne pouvons-nous pas le faire en utilisant count++ ?

Merci beaucoup pour vos conseils !

Le code est ici : https://codesandbox.io/s/g8dgv0?file=/src/components/App.jsx

Answer 1

React est fondamentalement une bibliothèque de rendu, et le paradigme qu'elle utilise est que l'information qui est rendue à l'écran doit découler directement de l'état actuel stocké dans React. Ainsi, appeler un state setter fait deux des choses :

• Il met à jour l'état interne de React pour cette valeur d'état
• Il indique au composant de redonner un nouveau rendu, afin de générer une nouvelle vue basée sur le nouvel état mis à jour.

Chaque fois qu'un composant fonctionnel réapparaît, la fonction s'exécute à nouveau - et useState peut renvoyer des valeurs différentes en fonction de la valeur actuelle de l'état interne.

Pour un exemple similaire en JS vanille :

let internalValue = false;
const getValue = () => internalValue;
const setValue = (newValue) => {
  internalValue = newValue;
  setTimeout(App);
};

const App = () => {
  const stateValue = getValue();
  if (!stateValue) {
    setValue(true);
  }
  console.log('app rendered with stateValue of', stateValue);
};
App();

Ci-dessus, vous pouvez faire const stateValue = getValue(); et obtenir des valeurs différentes pour stateValue en fonction d'autres facteurs - parce que le App la fonction s'est à nouveau exécutée .

Par ailleurs, si nous pouvons mettre à jour en utilisant count + 1, pourquoi ne pouvons-nous pas le faire en utilisant count++ ?

Parce que, comme expliqué au début de la réponse, la vue doit découler de l'état dans React, et lors de la mise à jour de l'état, vous devez demander à React d'effectuer un nouveau rendu ; la réaffectation d'une variable, en elle-même, n'a pas d'effets de bord. Vous devez appeler le state setter pour mettre à jour l'état interne de React, puis effectuer un nouveau rendu avec le nouvel état.

Il faut donc

setCount(count + 1);

et non

count++;

car seul le premier entraînera un nouveau rendu (même si vous aviez déclaré count con let ).

Answer 2

La valeur "0" dans votre useState(0) est la valeur par défaut/initiale avec laquelle l'état démarre. À partir de là, vous pouvez la modifier en utilisant setCount(value)

Pour votre deuxième question, de howtojs.io :

Dans React, nous ne devrions pas modifier les variables d'état directement. Nous devons passer les nouvelles données aux fonctions de modification des variables d'état (telles que setCount), puis React modifiera la valeur de la variable d'état.

Une autre chose dont il faut se souvenir, c'est que lorsque l'on fait un comptage++ en JavaScript, la variable sera incrémentée après avoir consommé la d'abord.

Ainsi, lorsque nous faisons setState(count++), la valeur de count sera d'abord passée à la fonction setState, puis la valeur de count sera incrémentée à l'intérieur du composant de la fonction (ce qui n'est pas recommandée).

Answer 3

Lorsque je console.log la valeur de count il augmente de 1 même si je l'ai déclaré en utilisant const.

Lorsque vous enregistrez sur la console le count vous êtes en train d'enregistrer le non actualisé valeur de l'état actuel. En d'autres termes, rien n'a encore changé. Ce n'est qu'à la fin du cycle de rendu, lorsque les mises à jour d'état en file d'attente sont traitées, que le composant effectue un nouveau rendu ( c'est-à-dire qu'il appelle le corps de la fonction ) avec la valeur actualisée de l'état.

Comment se fait-il qu'il soit encore mis à jour ? J'ai l'impression que c'est lié à la useState mais je n'en suis pas sûr.

Oui, le useState renvoie la valeur de l'état actuel et une fonction à appeler pour mettre en file d'attente une mise à jour de l'état.

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

En el increase le gestionnaire de rappel setCount est appelée avec la prochaine valeur que vous êtes demandant React pour mettre à jour l'état.

function increase() {
  setCount(count + 1);
}

Comme décrit ci-dessus, la mise à jour est mise en file d'attente et, à la fin du cycle de rendu, elle est traitée par React et déclenche le rendu du composant.

Par ailleurs, si nous pouvons mettre à jour en utilisant count + 1 Pourquoi ne pouvons-nous pas le faire ? en utilisant count++ ?

Dans React, nous Absolument pas état de mutation. Les count++ s'il pourrait fonctionne et ne provoque pas d'erreur, il s'agit toujours d'une mutation d'état. En essayant d'utiliser count++ est la même chose que d'essayer de faire count = count + 1 ce que nous ne faisons tout simplement pas dans React.

En termes plus généraux de Javascript, essayer de post-incrémenter avec count++ alors que count est déclarée const provoquerait une erreur. Lorsqu'une variable est déclarée const cela signifie seulement qu'il ne peut pas se voir réattribuer une valeur après l'initialisation. Cette ne signifie que la valeur actuellement attribuée est statique/constante. Si nous avions déclaré let [count, setCount] = useState(0) alors, selon les normes Javascript, faire count++ est parfaitement légale.

Nous utilisons les fonctions de mise à jour de l'état de React pour mettre en file d'attente les mises à jour de l'état et renvoyer généralement nouveau des références à des objets/valeurs.

Answer 4

Le crochet reste immuable dans le champ d'application de la fonction. Lorsque vous le modifiez, le composant s'affiche à nouveau.

Answer 5

Type const en JS n'empêche pas d'effectuer des opérations sur la variable. L'addition ou la soustraction de valeurs sera interprétée sans problème. Ici, le nombre augmente.

Cependant count L'abréviation ++ est écrite pour count = count + 1 lorsqu'une opération d'affectation a lieu et qu'elle est interdite par le type const.