So funktionieren React Hooks

1. React Hooks vs. reine Funktionen

Um es einfach auszudrücken: React Hook sind einige neue APIs, die in React V18.6 hinzugefügt wurden. Das Wesentliche der API besteht darin, eine Funktionsschnittstelle für bestimmte Funktionen bereitzustellen. Daher sind React Hooks Funktionen, aber keine reinen Funktionen.

Was ist eine reine Funktion? Das heißt, diese Funktion muss bei gleichem Eingabewert die gleiche Ausgabe erzeugen und darf keine Auswirkungen auf externe Daten haben.
Einfach ausgedrückt können außerhalb definierte Variablen nicht innerhalb einer Funktion verwendet werden, denn wenn außerhalb definierte Variablen verwendet werden und sich die externen Variablen ändern, wirkt sich dies auf die Berechnung innerhalb der Funktion aus und die Funktion wirkt sich auch auf die externen Variablen aus.

Die von React Hooks bereitgestellte funktionale API ist keine reine Funktion.
Sehen wir uns eine useState-Anweisung const [count, setCount] = useState(0) an. Die Ergebnisse der Verwendung der useState-Funktion sind nicht immer gleich, denn wenn das Ergebnis von useState(0) jedes Mal gleich ist, ändert sich der Zählwert nie und die Seite, auf der sich der Zählwert befindet, ändert sich nie, was sich von dem Ergebnis unterscheidet, das wir sehen. Daraus können wir erkennen, dass React Hooks keine reinen Funktionen sind, was bedeutet, dass Hooks Variablen außerhalb von Funktionen verwenden.

Was also macht React Hooks zu keinen reinen Funktionen? Tatsächlich wird es durch das React-Framework und die Funktionskomponente selbst bestimmt. Wir wissen, dass das Prinzip des React-Seiten-Renderings darin besteht, bei jedem Rendering einen neuen virtuellen DOM zu erhalten und dann zum Rendering der Seite einen DOM-Diff durchzuführen. Die Funktionskomponente von React erhält durch Ausführung der gesamten Funktion einen virtuellen DOM. Daher werden bei jedem Rendern der Seite alle Anweisungen innerhalb der Funktionskomponente erneut ausgeführt. Wenn die innerhalb der Funktionskomponente verwendeten React Hooks reine Funktionen sind, erhalten Sie nach jedem Rendering keinen anderen virtuellen DOM.

React legt fest, dass alle React-Komponenten reine Funktionen sein müssen und dass es ihnen untersagt ist, ihre eigenen Eigenschaften zu ändern.

Daher konnten Funktionskomponenten vor React V16.8, als React Hooks noch nicht veröffentlicht waren, da es sich um reine Funktionen handelte, nur einen festen virtuellen DOM zurückgeben, keine Zustände enthalten und keine Lebenszyklusmethoden unterstützen. Aus diesem Grund wurden zu diesem Zeitpunkt nur Funktionskomponenten unterstützt. Allerdings waren Funktionskomponenten im Vergleich zu Klassenkomponenten zu vielen Einschränkungen unterworfen. Funktionskomponenten konnten Klassenkomponenten weder ersetzen, noch waren sie so einfach zu verwenden wie Klassenkomponenten.

React möchte, dass Komponenten einfach und nicht komplex sind. React ist der Ansicht, dass Komponenten am besten mit Funktionen und nicht mit Klassen geschrieben werden sollten. Aus diesem Grund hat React React Hooks hinzugefügt. Hook bedeutet Hook, der von React für Funktionskomponenten bereitgestellt wird, um externe Funktionen und Datenstatus bei Bedarf „einzuhaken“, wodurch Funktionskomponenten verbessert werden und sie Klassenkomponenten vollständig ersetzen können.

Die Funktionskomponenten von React können nur reine Funktionen sein. Daher wird die Aufgabe, beim erneuten Rendern der Funktionskomponenten bei jedem Auftreten eines Ereignisses einen anderen virtuellen DOM zu erhalten, vollständig React Hooks überlassen. Wie macht React Hooks das also? Als nächstes implementieren wir manuell einen useState. Die spezifischen Details von useState sind definitiv unterschiedlich, aber die Prinzipien und Ideen sind dieselben.

2. Einfaches myUseState

Bei der ersten Ausführung von React.useState wird einem _state der Anfangswert zugewiesen, und bei jedem nachfolgenden erneuten Rendern wird der Wert von _state gelesen. Was setState in [state, setState] macht, ist, den Wert von _state zu ändern und dann die Seite erneut zu rendern.
Nach diesem Prinzip wird die Funktion myUseState wie folgt implementiert:

importiere React von „react“;
importiere ReactDOM von „react-dom“;

lass _state

Funktion meinUseState(Anfangswert){
  wenn(_state === undefiniert){
    _state = Anfangswert
  }
  const setState = (neuerWert)=>{
    _state = neuerWert
    machen()
  }
  return [_state, setzeState]
}

Funktion rendern(){
  ReactDOM.render(<App/>,document.getElementById('root'));
}

Funktion App(){
  const [n, setN] = meinNutzungszustand(0)
  zurückkehren (
    <div>
      n: {n}
      <button onClick={() => setN(n+1)}>+1</button>
    </div>
  )
}

ReactDOM.render(<App/>,document.getElementById('root'));

3. myUseState verbessern

Der oben implementierte myUseState hat einen Fehler. Wenn myUseState zweimal in einer Funktionskomponente verwendet wird, tritt ein Problem auf. Die beiden teilen sich denselben _state, was zu Verwirrung führt.
Daher muss die obige Implementierung verbessert werden. Die Idee der Verbesserung besteht darin, _state als Daten oder Objekt zu definieren. Da wir bei Verwendung der Funktion nur einen numerischen Wert übergeben, können wir den Schlüsselwert nicht bestimmen, sodass wir nur die Daten verwenden können. Die Verbesserungen sind wie folgt:

importiere React von „react“;
importiere ReactDOM von „react-dom“;

lass _state = []
lass Index = 0

Funktion meinUseState(Anfangswert){
  Konstant aktuellerIndex = Index
  wenn(_state[currentIndex] === undefiniert){
    _state[aktuellerIndex] = Anfangswert
  }
  const setState = (neuerWert)=>{
    _state[aktuellerIndex] = neuerWert
    machen()
  }
  Index++
  return [_state[aktuellerIndex], setzeStatus]
}

Funktion rendern(){
  Index = 0
  ReactDOM.render(<App/>,document.getElementById('root'));
}

Funktion App(){
  const [n, setN] = meinNutzungszustand(0)
  const [m, setM] = meinUseState(0)
  zurückkehren (
    <div>
      n: {n}
      <button onClick={() => setN(n+1)}>+1</button>
      <br/>
      m: {m}
      <button onClick={() => setM(m+1)}>+1</button>
    </div>
  )
}

ReactDOM.render(<App/>,document.getElementById('root'));

4. Hook-Regeln werden durch Implementierungsprinzipien ausgelöst

Der oben implementierte myUseState ist definitiv nicht der spezifische Implementierungscode von React.useState, aber das Implementierungsprinzip ist dasselbe. Die Funktion myUseState kapselt den Datenstatus innerhalb der Funktionskomponente und verwaltet den Status, indem sie die relevante Betriebsschnittstelle für die Verwendung durch die Funktionskomponente verfügbar macht.
Auf diese Weise wird die Funktionskomponente von ihrem Datenstatus getrennt. Die Funktionskomponente ist nur für die Rückgabe des virtuellen DOM selbst verantwortlich, und die Verwaltung des Datenstatus wird vollständig an den React.useState-Hook übergeben, an den sie „angehängt“ ist.

Aus den oben genannten Implementierungsideen können wir erkennen, dass die Implementierung von React Hooks tatsächlich eine spezielle Funktion ist, die auf globalen Variablen und Abschlussprinzipien basiert.

Gerade aufgrund dieser Implementierungsmethode ist die Verwendung von React Hooks jedoch darauf beschränkt, Hooks nur auf der obersten Ebene aufzurufen, was bedeutet, dass Hooks nicht in Schleifen, Bedingungen oder verschachtelten Funktionen aufgerufen werden sollten. Wenn Hooks in if-Bedingungsanweisungen verwendet werden, ist die Anzahl der Ausführungen der React.useState-Anweisung bei jedem Rendern der Komponente falsch, was die Indexzählung durcheinander bringt und zu Datenwartungsfehlern führt.

Das obige Implementierungsprinzip basiert auf der korrekten Zählung der Indizes, daher verlässt sich React auf die Reihenfolge, in der Hooks aufgerufen werden.

Oben finden Sie eine ausführliche Erklärung zur Funktionsweise von React Hooks. Weitere Informationen zu React Hooks finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!