Reacts Übergang von Klassen zu Hooks

Reagieren Sie mit Hooks

Vorwort

In den letzten drei Jahren meiner Arbeit habe ich Klassen zum Schreiben funktionaler Front-End-Seiten verwendet. Tatsächlich habe ich mich seit einiger Zeit mit Hooks beschäftigt. Das erste Mal kam ich damit in Berührung, als ich einen Kurs über Electron+React-Projekte ansah. Damals habe ich mich hauptsächlich mit Elektronen beschäftigt und den Hooks daher keine besondere Aufmerksamkeit geschenkt. Vielleicht liegt es auch an meiner langjährigen Vertrautheit mit Klassen und dass ich damals eine gewisse Abneigung gegen den funktionalen Schreibstil von Hooks hatte. Aufgrund der positiven Bewertungen von Hooks in der Branche wollte ich Hooks einmal verwenden, um ein Projekt zu starten. Aufgrund des damaligen Projektzyklus und des vorhandenen Technologie-Stacks hatte ich jedoch nie die Gelegenheit, dies in die Praxis umzusetzen.

Weil ich in letzter Zeit React Hooks+Ts für neue Projekte verwendet habe. Also müssen wir anfangen, Hooks zu verwenden. Tatsächlich ist es, was die funktionale Entwicklung angeht, nicht falsch, andere einfach zu kopieren. Da es jedoch kein systematisches und tiefgreifendes Verständnis von Hooks gibt, ist in vielen Fällen nicht klar, warum sie auf diese Weise verwendet werden sollen. Deshalb habe ich kürzlich „Grundprinzipien und Praxis von React Hooks“ zum Lernen gefunden.

Überprüfen Sie die Verwendung von Hooks und warum sie auf der Verwendungs- und Begründungsebene verwendet werden sollten. Es wird weiter über die Vorteile des funktionalen Schreibens nachgedacht. Tatsächlich habe ich bis zu einem gewissen Grad nur an der Oberfläche gekratzt. Hier halte ich lediglich fest, was ich in dieser Zeit gelernt habe.

Warum Hooks?

Ein großes Highlight von Hooks ist, dass die Geschäftslogik wiederverwendet werden kann. Besonders deutlich wird dies bei Haken. Wenn Sie beispielsweise Änderungen der Fenstergröße in einer normalen Klasse überwachen möchten, müssen Sie nach dem Mounten ein Überwachungsereignis in die Komponente einfügen. Wenn diese Funktion zur Überwachung der Fenstergröße jedoch an einer anderen Stelle benötigt wird, kann dieser Logikcode nicht wiederverwendet und nur in dieser Komponente neu geschrieben werden. In Hooks können wir diesen Teil des Überwachungslogikcodes jedoch im Hook-Modus kapseln und eine vollständige logische Wiederverwendung erreichen.

Für den Unterricht

• Bei Verwendung von Class als Träger von React:
• Komponenten erben nicht voneinander und nutzen die Klassenvererbungsfunktion nicht. Die Benutzeroberfläche ist zustandsgesteuert und alle Methoden werden intern oder automatisch als Lebenszyklusmethoden aufgerufen. Die Möglichkeit, Instanzmethoden einer Klasse aufrufen zu können, wird nicht genutzt

Für Funktion

Einer der Kernpunkte von React besteht darin, eine Bindung von Statusdaten zur Ansichtsebene zu realisieren. Die Verwendung von Funktionen ist tatsächlich eine bessere Möglichkeit, das Zuordnungsproblem vom Status zur Ansicht zu lösen. Die Verwendung von Funktionen als Träger von React führt jedoch zu zwei Problemen: der Zustandserhaltung in der Funktion und den Lebenszyklusmethoden .

• So löst Hooks die beiden oben genannten Probleme: Binden Sie externe Daten an die Ausführung einer Funktion. Aktivieren Sie Funktionen zur automatischen Neuausführung bei Datenänderungen. Auf diese Weise können alle externen Daten, die die UI-Darstellung beeinflussen, über diesen Mechanismus an die Funktionskomponenten von React gebunden werden.
• Grundlegendes zu Hooks: Verknüpfen Sie ein Zielergebnis mit einer Daten- oder Ereignisquelle, die sich ändern kann. Wenn sich dann die verknüpften Daten oder Ereignisse ändern, wird der Code, der das Zielergebnis generiert, erneut ausgeführt, um ein aktualisiertes Ergebnis zu erzeugen.

Abbildung: Ein Ausführungsprozess (Execution), wie beispielsweise die Funktionskomponente selbst, kann an den herkömmlichen Status oder die URL oder sogar die Größe des Fensters gebunden (eingebunden) werden. Auf diese Weise wird eine Funktion erneut ausgeführt, um aktualisierte Ergebnisse zu erzeugen, wenn sich der Status, die URL oder die Fenstergröße ändert.

Klassen vs. Hooks

• Im Vergleich zu Klassenkomponenten eignen sich Funktionskomponenten besser zum Ausdrücken der Ausführung von React-Komponenten, da sie eher der logischen Beziehung „Status => Ansicht“ entsprechen. Aufgrund des Fehlens von Status, Lebenszyklus und anderen Mechanismen waren seine Funktionen jedoch immer eingeschränkt. Hooks löst die eingeschränkten Probleme des Statuslebenszyklus von Funktionskomponenten als React-Träger und ermöglicht die vollständige Nutzung ihrer Funktionen
• Das in Hooks eingebundene Objekt kann eine unabhängige Datenquelle oder das Ergebnis einer anderen Hook-Ausführung sein, was den größten Vorteil von Hooks mit sich bringt: die Wiederverwendung von Logik
• Vereinfacht die Wiederverwendung von Logik
  • In der Klassenmethode: Verwenden Sie das Entwurfsmuster von Komponenten höherer Ordnung zur Wiederverwendung der Logik. Wenn wir beispielsweise eine Funktion zur Fenstergrößenänderung wiederverwenden möchten, müssen wir eine äußere Komponente ohne Benutzeroberfläche definieren, die entsprechende Größenänderungslogikdefinition schreiben und dann das Datenergebnis in Form von Attributen an die untergeordnete Komponente übergeben. Wenn eine Komponente diese Logik wiederverwenden möchte, muss sie mit dieser Komponente umschlossen und zurückgegeben werden. Insgesamt müssen wir, um einen externen Status zu übergeben, eine äußere Komponente ohne Benutzeroberfläche definieren, und diese Komponente dient lediglich dazu, eine wiederverwendbare Logik zu kapseln. **Bei häufiger Verwendung wird für jede Komponente auf hoher Ebene eine zusätzliche Knotenebene hinzugefügt, was das Debuggen usw. erheblich belastet.

//High-Level-Komponenten in der Klasse implementieren die Wiederverwendung der Größenänderungsmethode //1. Deklaration von High-Level-Komponenten const withWindowSize = Component => {
  // Erzeuge eine WrappedComponent-Komponente auf hoher Ebene, die nur die Logik zur Überwachung der Fenstergröße enthält. class WrappedComponent extends React.PureComponent {
    Konstruktor(Requisiten) {
      super(Requisiten);
      dieser.Zustand = {
        Größe: this.getSize()
      };
    }
    componentDidMount() {
      window.addEventListener("Größe ändern", this.handleResize); 
    }
    componentWillUnmount() {
      window.removeEventListener("Größe ändern", this.handleResize);
    }
    Größe abrufen() {
      Gibt window.innerWidth > 1000 zurück? „groß“: „klein“;
    }
    handleResize = () => {
      const aktuelleSize = this.getSize();
      dies.setState({
        Größe: this.getSize()
      });
    }
    rendern() {
      // Übergeben Sie die Fenstergröße an die eigentliche Geschäftslogikkomponente. return <Component size={this.state.size} />;
    }
  }
  WrappedComponent zurückgeben;
};
//2. Komponente MyComponent verwendet die Größenänderungsfunktion in der übergeordneten Komponentenklasse MyComponent extends React.Component{
  rendern() {
    const { Größe } = diese.Requisiten;
    wenn (Größe === "klein") return <Kleine Komponente />;
    sonst returniere <LargeComponent />;
  }
}
//Verwenden Sie withWindowSize, um eine übergeordnete Komponente zu generieren, die das Größenattribut generiert und es an die eigentliche Geschäftskomponente weitergibt. Exportieren Sie standardmäßig withWindowSize(MyComponent); 

• In der Hooks-Methode: Wenn eine Größenänderung implementiert ist, ist die Fenstergröße lediglich ein externer Datenstatus. Wir verwenden Hooks, um es einzukapseln, und verwandeln es einfach in eine bindbare Datenquelle. Wenn sich die Fenstergröße ändert, rendert die Komponente den Code auch erneut, was prägnanter und intuitiver ist und keine zusätzlichen Komponentenknoten generiert.

//Hooks verwendet die Hooks-Methode, um die Größenänderungslogik wiederzuverwenden //Definiere den useWindowSize-Hook
const getSize = () => {
  Gibt window.innerWidth > 1000 zurück? „groß“: „klein“;
}
const useWindowSize = () => {
  const [Größe, Größe festlegen] = useState(Größe abrufen());
  useEffect(() => {
  const handler = () => {
      Größe festlegen(Größe abrufen())
    };
    window.addEventListener('Größe ändern', Handler);
    zurückgeben () => {
      window.removeEventListener('Größe ändern', Handler);
    };
  }, []);
  Rückgabegröße;
};
//Verwenden Sie diesen Hook in der Funktionskomponente
const Demo = () => {
  const Größe = useWindowSize();
  wenn (Größe === "klein") return <Kleine Komponente />;
  sonst returniere <LargeComponent />;
};

• Hilft bei der Trennung von Belangen

Hooks können den Code für dieselbe Geschäftslogik so weit wie möglich aggregieren. In der Klassenkomponente muss derselbe Geschäftslogikcode auf verschiedene Lebenszyklusmethoden der Klassenkomponente verteilt werden.

Abbildung: Die linke Seite ist die Klassenkomponente und die rechte Seite ist die mit Hooks kombinierte Funktionskomponente. Blau und Gelb stehen für unterschiedliche Geschäftsfunktionen

Wie speichern Hooks den Komponentenstatus und nutzen den Lebenszyklus?

React bietet insgesamt 10 Hooks , useState , useEffect , useCallback , useMemo , useRef , useContext usw.

1. useState: Erlaubt Funktionen, den Status beizubehalten

Ein Grundsatz, den wir befolgen sollten, ist, dass der Status niemals Werte speichern sollte, die berechnet werden können, zum Beispiel:

• Der von den Requisiten übergebene Wert. Manchmal kann der von Props übergebene Wert nicht direkt verwendet werden, sondern muss nach bestimmten Berechnungen, wie z. B. dem Sortieren, auf der Benutzeroberfläche angezeigt werden. Was wir also tun müssen, ist, die Ergebnisse bei jeder Verwendung neu zu sortieren oder einen Cache-Mechanismus zu verwenden, anstatt die Ergebnisse direkt in den Status zu übertragen.
• Der aus der URL gelesene Wert. Beispielsweise müssen Sie manchmal die Parameter in der URL lesen und als Teil des Komponentenstatus verwenden. Dann können wir es jedes Mal, wenn wir es brauchen, aus der URL lesen, anstatt es auszulesen und direkt in den Status einzufügen.
• Aus Cookies und localStorage gelesene Werte. Generell gilt, dass es bei jedem Bedarf direkt gelesen wird, statt es auszulesen und in den Zustand zu versetzen.

2. useEffect: Nebeneffekte ausführen

Ein Nebeneffekt ist ein Codeteil, der keinen Einfluss auf das Ergebnis der aktuellen Ausführung hat. Wenn Sie beispielsweise eine Variable außerhalb einer Funktion ändern möchten, müssen Sie eine Anfrage initiieren. Format: useEffect(callback, dependencies) . Es umfasst drei Lebenszyklusmethoden: componentDidMount , componentDidUpdate und componentWillUnmount . Kurz gesagt, useEffect bestimmt die Abhängigkeit und führt sie jedes Mal aus, wenn die Komponente gerendert wird.

Bei der Verwendung von useEffect sind folgende Punkte zu beachten:

Wenn keine Abhängigkeiten bestehen, wird es nach jedem Rendern erneut ausgeführt

Effekt verwenden(()=>{
	console.log('re-render') //Jedes Mal ausführen, wenn das Rendern abgeschlossen ist})

• Wenn ein leeres Array als Abhängigkeit verwendet wird, wird es nur bei der ersten Ausführung ausgelöst und die entsprechende Klassenkomponente ist componentDidMount

Effekt verwenden(()=>{
  console.log('did mount') //entspricht componentDidMount
},[])

• Sie können eine Funktion zurückgeben, um einige Bereinigungsvorgänge durchzuführen, wenn die Komponente zerstört wird.

const [Größe,Größenänderung] = useState({})
Effekt verwenden(()=>{
	const handler = () => {
    setResize()
	}
	window.addEventListener('Größe ändern',Handler)
	Rückkehr ()=>{
		window.removeEventListener('Größe ändern',Handler)
	}
},[])

Zusammenfassen

• Die vier von useEffect verwendeten Szenarien werden nach jedem Rendern ausgeführt: Es wird kein zweiter Abhängigkeitsparameter bereitgestellt. Beispielsweise useEffect(() => {}).
• Wird nur nach dem ersten Rendern ausgeführt: Geben Sie ein leeres Array als Abhängigkeiten an. Beispielsweise useEffect(() => {}, []).
• Wird beim ersten Mal und nach Änderungen der Abhängigkeiten ausgeführt: Stellen Sie ein Array von Abhängigkeiten bereit. Beispielsweise useEffect(() => {}, [deps]).
• Wird ausgeführt, nachdem die Komponente ausgehängt wurde: Gibt eine Rückruffunktion zurück. Beispiel: useEffect() => { return () => {} }, []).

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!