React Hooks - utiliser useState ou simplement des variables

Question

React Hooks nous donne l'option useState, et je vois toujours des comparaisons entre Hooks et Class-State. Mais qu'en est-il des Hooks et des variables ordinaires ?

Par exemple,

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

Je n'ai pas utilisé de crochets, et cela me donne les mêmes résultats que :

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

Alors quelle est la différence ? L'utilisation des crochets est encore plus complexe dans ce cas... Alors pourquoi commencer à les utiliser ?

Answer 1

La raison est que si vous useState cela change la vue. Les variables en elles-mêmes ne changent que des bits en mémoire et l'état de votre application peut être désynchronisé avec la vue.

Comparez ces exemples :

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

Dans les deux cas a change en cas de clic, mais seulement lorsque vous utilisez useState la vue montre correctement a La valeur actuelle de l'entreprise.

Answer 2

Les variables locales seront réinitialisées à chaque rendu lors de la mutation, tandis que l'état sera mis à jour :

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}

Answer 3

La mise à jour de l'état entraîne un nouveau rendu du composant, mais pas des valeurs locales.

Dans votre cas, vous avez rendu cette valeur dans votre composant. Cela signifie que, lorsque la valeur est modifiée, le composant doit être rendu à nouveau pour afficher la valeur mise à jour.

Il sera donc préférable d'utiliser useState que la valeur locale normale.

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

Answer 4

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

est équivalent à

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

Quoi useState Les retours sont deux choses :

1. nouvelle variable d'état
2. setter pour cette variable

si vous appelez setA(1) vous appelleriez this.setState({ a: 1 }) et déclencher un nouveau rendu.

Answer 5

Votre premier exemple ne fonctionne que parce que les données ne changent pratiquement jamais. Le point d'entrée de l'utilisation de setState est de rendre tout le composant quand l'état change. Ainsi, si votre exemple nécessite une sorte de changement d'état ou de gestion, vous réaliserez rapidement que des valeurs de changement seront nécessaires et que pour mettre à jour la vue avec la valeur de la variable, vous aurez besoin de l'état et du rendu.