React Hooks - en utilisant les variables useState vs just

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?

La raison en est que si vous useStaterestituez la vue. Les variables seules ne modifient que les bits en mémoire et l'état de votre application peut se désynchroniser 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, les amodifications au clic, mais uniquement lorsque vous utilisez useStatecorrectement la vue, affichent ala valeur actuelle de.

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 useStateune 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>;
}

Votre premier exemple ne fonctionne que parce que les données ne changent pratiquement jamais. Le point d'entrée de l'utilisation setStateest de restituer l'intégralité de votre composant lorsque l'état se bloque. Donc, si votre exemple nécessitait 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.

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

Quels useStateretours sont deux choses:

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

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

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>
  );
}