Einführungstutorial zu React Hooks

Zustandshaken

Beispiele:

importiere { useState } von „react“;

Funktion Beispiel() {
 const [Anzahl, Anzahl festlegen] = useState(0);
//count: deklarierte Variable; setCount: Funktion zum Ändern des Zählwerts; 0: Anfangswert des Zählwerts return (
  <div>
   <p>Sie haben {count} Mal geklickt</p>
   <button bei Klick={() => setzeAnzahl(Anzahl + 1)}>
    Klick mich
   </button>
  </div>
 );
}

useState ist eine Hook-Funktion, die mit React geliefert wird und deren Funktion darin besteht, Statusvariablen zu deklarieren. Der von der Funktion useState empfangene Parameter ist unser Anfangszustand. Sie gibt ein Array zurück. Das [0]te Element in diesem Array ist der aktuelle Zustandswert und das [1]te Element ist die Methodenfunktion, die den Zustandswert ändern kann.
Was wir also tatsächlich getan haben, war聲明了一個狀態變量count，把它的初始值設為0，同時提供了一個可以更改count的函數setCount .

Wenn der Benutzer auf die Schaltfläche klickt, rufen wir die Funktion setCount auf, die den neuen Statuswert als Parameter erhält. Als nächstes lassen wir es reagieren, wodurch unsere Beispielkomponente erneut gerendert wird.

Was passiert, wenn eine Komponente mehrere Statuswerte hat?
Zunächst einmal useState是可以多次調用的, daher können wir es wie folgt schreiben:

Funktion BeispielMitVielenZuständen() {
 const [Alter, Alter festlegen] = useState(42);
 const [Obst, setFruit] = useState('Banane');
 const [todos, setTodos] = useState([{ text: 'Hooks lernen' }]);
}

Zweitens muss der von useState empfangene Anfangswert kein einfacher Datentyp wie Zeichenfolge/Zahl/Boolescher Wert sein. Er kann Objekte oder Arrays als Parameter empfangen. Zu beachten ist lediglich, dass unser vorheriges this.setState die Zustände zusammenführte und einen neuen Zustand zurückgab, während useState是直接替換老狀態后返回新狀態.

Einerseits wird der Hook direkt in der Funktion statt in der Klasse verwendet, andererseits ist jeder Hook unabhängig voneinander, und verschiedene Komponenten, die denselben Hook aufrufen, können die Unabhängigkeit ihrer jeweiligen Zustände sicherstellen.

Wie stellt React die Unabhängigkeit mehrerer UseStates sicher?

Die Antwort ist, react是根據useState出現的順序來定的. Schauen wir uns das genauer an

//Erstes Rendering useState(42); //Alter auf 42 initialisieren
 useState('Banane'); //Frucht zu Banane initialisieren
 useState([{ text: 'Learn Hooks' }]); //...

 // Zweites Rendering useState (42); // Lies den Wert der Statusvariablen age (der zu diesem Zeitpunkt übergebene Parameter 42 wird direkt ignoriert)
 useState('banana'); // Lies den Wert der Zustandsvariablen fruit (der Parameter banana wird zu diesem Zeitpunkt ignoriert)
 useState([{ text: 'Learn Hooks' }]); //...

React schreibt vor, dass wir Hooks in der äußersten Ebene der Funktion schreiben müssen und sie nicht in bedingte Anweisungen wie ifelse schreiben können, um sicherzustellen, dass die Ausführungsreihenfolge der Hooks konsistent ist.

Effekt-Hooks

Beispiele:

importiere { useState, useEffect } von „react“;

Funktion Beispiel() {
 const [Anzahl, Anzahl festlegen] = useState(0);

 // Ähnlich wie componentDidMount und componentDidUpdate:
 useEffect(() => {
  // Aktualisieren Sie den Dokumenttitel. document.title = `Sie haben ${count} Mal geklickt`;
 });

 zurückkehren (
  <div>
   <p>Sie haben {count} Mal geklickt</p>
   <button bei Klick={() => setzeAnzahl(Anzahl + 1)}>
    Klick mich
   </button>
  </div>
 );
}

Wie würden wir es ohne Hooks schreiben?

Klasse Beispiel erweitert React.Component {
 Konstruktor(Requisiten) {
  super(Requisiten);
  dieser.Zustand = {
   Anzahl: 0
  };
 }

 componentDidMount() {
  document.title = `Sie haben ${this.state.count} Mal geklickt`;
 }

 KomponenteDidUpdate() {
  document.title = `Sie haben ${this.state.count} Mal geklickt`;
 }

 rendern() {
  zurückkehren (
   <div>
    <p>Sie haben {this.state.count} Mal geklickt</p>
    <button onClick={() => this.setState({ count: this.state.count + 1 })}>
     Klick mich
    </button>
   </div>
  );
 }
}

Die von uns geschriebenen Statuskomponenten haben normalerweise viele Nebenwirkungen, z. B. das Initiieren von Ajax-Anfragen zum Abrufen von Daten, das Hinzufügen einiger Listener-Registrierungen und -Abmeldungen, das manuelle Ändern des DOM usw. Wir haben diese Nebeneffektfunktionen zuvor in Lebenszyklus-Funktions-Hooks geschrieben, wie etwa componentDidMount, componentDidUpdate und componentWillUnmount.現在的useEffect就相當與這些聲明周期函數鉤子的集合體. Es steht eins zu drei.

Wie kann man einige Nebenwirkungen von useEffect aufheben ?

傳給useEffect的副作用函數返回一個新的函數即可. Diese neue Funktion wird nach dem nächsten erneuten Rendern der Komponente ausgeführt.

importiere { useState, useEffect } von „react“;

Funktion FriendStatus(Eigenschaften) {
 const [isOnline, setIsOnline] = useState(null);

 Funktion handleStatusChange(status) {
  setIsOnline(status.isOnline);
 }

 useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  // Achten Sie unbedingt auf diese Reihenfolge: Weisen Sie React an, die Bereinigung nach dem nächsten erneuten Rendern der Komponente und vor dem nächsten Aufruf von ChatAPI.subscribeToFriendStatus durchzuführen.
  Rückgabefunktion cleanup() {
   ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
 });

 wenn (isOnline === null) {
  gibt „Wird geladen …“ zurück;
 }
 gibt „isOnline“ zurück? „Online“: „Offline“;
}

Wie kann man einige unnötige Nebeneffektfunktionen überspringen?

Gemäß der Idee im vorherigen Abschnitt müssen diese Nebeneffektfunktionen bei jedem erneuten Rendering ausgeführt werden, was offensichtlich nicht wirtschaftlich ist. Wie kann man einige unnötige Berechnungen überspringen? Wir müssen nur den zweiten Parameter an useEffect übergeben. Verwenden Sie den zweiten Parameter, um React anzuweisen, die von uns übergebene Nebeneffektfunktion (der erste Parameter) nur auszuführen, wenn sich der Wert dieses Parameters ändert.

useEffect(() => {
 document.title = `Sie haben ${count} Mal geklickt`;
}, [Anzahl]); // Nur wenn sich der Wert von count ändert, wird der Satz `document.title` erneut ausgeführt

Wenn wir als zweiten Parameter ein leeres Array [] übergeben, ist dies tatsächlich gleichbedeutend damit, es nur während des ersten Renderings auszuführen. Dies ist das Muster von componentDidMount plus componentWillUnmount. Diese Verwendung kann jedoch zu Fehlern führen. Verwenden Sie sie daher seltener.

Welche anderen integrierten Effekt-Hooks gibt es?

Kontext verwenden
verwendenReducer
useCallback
verwendenMemo
useRef
Verwenden Sie ImperativeMethods
Mutationseffekt verwenden
useLayoutEffect

Wie schreibe ich benutzerdefinierte Effekt-Hooks?

Warum sollten wir selbst einen Effekt-Hook schreiben? Auf diese Weise können wir把可以復用的邏輯抽離出來，變成一個個可以隨意插拔的“插銷” Ich kann sie in die Komponente einstecken, die ich verwenden möchte.

Beispielsweise können wir die Funktion zum Beurteilen, ob ein Freund online ist, aus der oben beschriebenen FriendStatus-Komponente extrahieren und einen neuen useFriendStatus-Hook speziell zum Beurteilen erstellen, ob eine bestimmte ID online ist.

importiere { useState, useEffect } von „react“;

Funktion useFriendStatus(Freund-ID) {
 const [isOnline, setIsOnline] = useState(null);

 Funktion handleStatusChange(status) {
  setIsOnline(status.isOnline);
 }

 useEffect(() => {
  ChatAPI.subscribeToFriendStatus(Freund-ID, handleStatusChange);
  zurückgeben () => {
   ChatAPI.unsubscribeFromFriendStatus(Freund-ID, handleStatusChange);
  };
 });

 Rückgabe ist Online;
}

Derzeit kann die Komponente „FriendStatus“ wie folgt gekürzt werden:

Funktion FriendStatus(Eigenschaften) {
 const isOnline = useFriendStatus(props.friend.id);

 wenn (isOnline === null) {
  gibt „Wird geladen …“ zurück;
 }
 gibt „isOnline“ zurück? „Online“: „Offline“;
}

Angenommen, wir haben eine weitere Freundesliste, die auch Online-Informationen anzeigen muss:

Funktion FriendListItem(Eigenschaften) {
 const isOnline = useFriendStatus(props.friend.id);

 zurückkehren (
  <li Stil = {{ Farbe: istOnline ? 'grün' : 'schwarz' }}>
   {props.friend.name}
  </li>
 );
}

Dies ermöglicht組件復用.

Taro-Haken

Es ist sehr einfach, die Hooks-API in Taro zu verwenden. Taros proprietäre Hooks (wie usePageScroll, useReachBottom) werden von @tarojs/taro eingeführt, und die eigenen Hooks des Frameworks (wie useEffect, useState) werden vom entsprechenden Framework eingeführt.

importiere { usePageScroll, useReachBottom } von '@tarojs/taro' // Taro-spezifische Hooks
importiere { useState, useEffect } von 'react' // Framework-Hooks (einfache Hooks)

Damit ist dieser Artikel mit dem ausführlichen Tutorial zum Einstieg in React Hooks abgeschlossen. Weitere relevante Einführungsinhalte zu React Hooks finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!