React Hooks - en utilisant useState vs just variables

Question

React Hooks nous donne l'option useState, et je vois toujours des comparaisons Hooks vs Class-State. Mais qu'en est-il des crochets et de certaines variables régulières?

Par exemple,

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

Je n'ai pas utilisé de crochets, et cela me donnera 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? Utiliser des crochets encore plus complexes pour ce cas ... Alors pourquoi commencer à l'utiliser?

Answer 1

La raison en est que si vous useState, il restitue la vue. Les variables seules ne modifient que les 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 au clic, mais uniquement lorsque vous utilisez useState, la vue affiche correctement la valeur actuelle de a.

Answer 2

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

Dans votre cas, vous avez rendu cette valeur dans votre composant. Cela signifie que lorsque la valeur est modifiée, le composant doit être restitué 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 3

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 restituer l'intégralité de votre composant lorsque l'état se bloque. Donc, si votre exemple nécessite une sorte de changement d'état ou de gestion, vous réaliserez rapidement que les valeurs de changement seront nécessaires et pour mettre à jour la vue avec la valeur variable, vous aurez besoin de l'état et du rendu.

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
        };
    }
    // ...
}

Ce que useState renvoie est 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éclencheriez un nouveau rendu.

Answer 5

Les variables locales seront réinitialisées à chaque rendu lors d'une 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>
  );
}