Heim  >  Artikel  >  Web-Frontend  >  Ein useState-Leistungstipp, den Sie vielleicht noch nicht kennen

Ein useState-Leistungstipp, den Sie vielleicht noch nicht kennen

Patricia Arquette
Patricia ArquetteOriginal
2024-10-30 23:50:29257Durchsuche

A useState performance tip you may not have known

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn