Warum useState statt nur Variablen in React verwenden?

Warum useState statt nur Variablen in React verwenden?

Haben Sie sich jemals gefragt, warum wir in React useState anstelle nur von Variablen verwenden? Lassen Sie uns dieses Konzept anhand eines einfachen Gegenbeispiels untersuchen.

Ein einfaches Gegenbeispiel

Stellen Sie sich vor, wir hätten einen einfachen Zähler mit zwei Tasten: eine zum Erhöhen der Zählung und eine zum Verringern. Wenn wir diesen Zähler mit useState erstellen, funktioniert er perfekt. Wenn wir jedoch versuchen, nur eine reguläre Variable zu verwenden, funktioniert es nicht wie erwartet.

import React, { useState } from 'react';

function Counter() {
  // Using useState to create a state variable
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

Was ist useState?

useState ist ein Hook in React, mit dem Sie Funktionskomponenten einen Status hinzufügen können. Ein Zustand ist wie eine Erinnerung, die die Komponente verwendet, um sich Dinge zu merken und sie im Laufe der Zeit zu aktualisieren.

Warum Variablen nicht funktionieren

Der Grund dafür, dass die Verwendung einer Variablen nicht funktioniert, liegt darin, dass React Änderungen in einer regulären Variablen nicht verfolgt, wie dies bei einem von useState verwalteten Status der Fall ist. Wenn Sie auf die Schaltfläche zum Erhöhen oder Verringern klicken, teilt useState React mit, dass sich der Status geändert hat. React rendert dann die Komponente erneut und aktualisiert die Anzahl.

Bei einer regulären Variable erkennt React die Änderungen jedoch nicht und aktualisiert die Anzahl daher nicht.

import React from 'react';

function Counter() {
  // Using a regular variable
  let count = 0;

  const increase = () => {
    count += 1;
  };

  const decrease = () => {
    count -= 1;
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

Abschluss

Ich hoffe, Sie verstehen jetzt, warum useState für die Zustandsverwaltung in React unerlässlich ist. Dadurch kann React Änderungen verfolgen und die Komponente entsprechend aktualisieren. Vielen Dank für Ihre Zeit und bis bald!

Das obige ist der detaillierte Inhalt vonWarum useState statt nur Variablen in React verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!