Ein useState-Leistungstipp, den Sie vielleicht noch nicht kennen

Nehmen wir an, wir haben eine Reaktionskomponente mit einem useState darin.

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation())

    return (
      // ...
    );
  }

Wir initiieren den Zustand mit dem Ergebnis der Funktion „costeCalculation“.
Jedes Mal, wenn die Komponente erneut gerendert wird, wird die Funktion „teureCalculation“ ausgeführt, obwohl wir nur deren Ergebnis als Anfangswert von useState benötigen. Das Ergebnis der Funktion wird nicht verwendet.

Um die teure Berechnung beim erneuten Rendern zu vermeiden, übergeben Sie die Funktion selbst, ohne sie aufzurufen. React ist intelligent genug, um die Funktion selbst beim Mounten und nicht bei jedem Rendern aufzurufen.

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation)

    return (
      // ...
    );
  }

Das obige ist der detaillierte Inhalt vonEin useState-Leistungstipp, den Sie vielleicht noch nicht kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!