React Hooks - mit useState gegen nur Variablen

React Hooks geben uns die useState-Option, und ich sehe immer Vergleiche zwischen Hooks und Class-State. Aber was ist mit Hooks und einigen regulären Variablen?

Zum Beispiel,

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

Ich habe keine Hooks verwendet und es werden die gleichen Ergebnisse erzielt wie:

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

Was ist der Unterschied? Die Verwendung von Hooks ist in diesem Fall noch komplexer ... Warum also anfangen?

Der Grund ist, wenn Sie useStatedie Ansicht erneut rendern. Variablen selbst ändern nur die Bits im Speicher und der Status Ihrer App kann nicht mehr mit der Ansicht synchronisiert werden.

Vergleichen Sie diese Beispiele:

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

In beiden Fällen aändert sich useStateder aaktuelle Wert beim Klicken, aber nur, wenn Sie die Ansicht korrekt verwenden .

Durch das Aktualisieren des Status wird die Komponente erneut gerendert, lokale Werte jedoch nicht.

In Ihrem Fall haben Sie diesen Wert in Ihrer Komponente gerendert. Das heißt, wenn der Wert geändert wird, sollte die Komponente neu gerendert werden, um den aktualisierten Wert anzuzeigen.

Es ist also besser zu verwenden useStateals der normale lokale Wert.

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

Ihr erstes Beispiel funktioniert nur, weil sich die Daten im Wesentlichen nie ändern. Der setStateEingabepunkt für die Verwendung ist das erneute Rendern Ihrer gesamten Komponente, wenn sich der Status ändert. Wenn für Ihr Beispiel eine Statusänderung oder -verwaltung erforderlich ist, werden Sie schnell feststellen, dass Änderungswerte erforderlich sind. Um die Ansicht mit dem Variablenwert zu aktualisieren, benötigen Sie den Status und das erneute Rendern.

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

ist äquivalent zu

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

Was useStatezurückkommt, sind zwei Dinge:

1. neue Zustandsvariable
2. Setter für diese Variable

Wenn Sie anrufen, rufen setA(1)Sie an this.setState({ a: 1 })und lösen ein erneutes Rendern aus.

Lokale Variablen werden bei jeder Mutation bei jeder Mutation zurückgesetzt, während der Status aktualisiert wird:

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