Tipps zur Verwendung von Hooks in Klassenkomponenten

Seit React Version 16.8 hat die Entwickler-Community Hooks aufgrund ihrer Bequemlichkeit und einfachen Benutzeroberfläche angenommen. Eingebaute Hooks wie useState und useEffect ermöglichen es, den Zustand in funktionalen Komponenten zu erhalten und Lebenszyklusmethoden einzurichten.

Noch wichtiger ist, dass viele Bibliotheken dazu übergegangen sind, Hooks anstelle von benutzerdefinierten Komponenten oder Dienstprogrammen zu unterstützen, die mit Klassenkomponenten kompatibel sind. Dies erzwingt die Frage, ob es möglich ist, Hooks in Komponenten der React-Klasse zu verwenden.

Entwickler benötigen immer noch die leistungsstarke Funktionalität von benutzerdefinierten Hooks, müssen aber möglicherweise alternative Möglichkeiten finden, sie zu verwenden. Wenn Sie im selben Boot sitzen, befolgen Sie diese Anleitung zur Verwendung von Haken in Klassenkomponenten.

Verwenden Sie Hooks in React-Klassenkomponenten

Seit der Einführung von Hooks haben sich viele React-Entwickler entschieden, Dutzende von Klassenkomponenten in funktionale Komponenten umzugestalten.

Das ist möglicherweise nicht möglich, wenn Ihre Anwendung Hunderte von Klassenkomponenten enthält. Das Refactoring wird zu lange dauern.

Einige Entwickler bevorzugen eine Klassensyntax und möchten keine funktionalen Komponenten schreiben.

Leider unterstützen Klassenkomponenten keine Hooks, und es gibt keine Möglichkeit, Hooks in ihnen zu verwenden. Die einzige praktische Möglichkeit, Hooks innerhalb von Klassenkomponenten zu verwenden, besteht darin, die beiden Arten von Komponenten in einem einzigen Baum zu mischen.

Theoretisch könnten Sie mit Hooks funktionale Komponenten verwenden, um Werte zu generieren, und diesen Wert über Requisiten an Klassenkomponenten weitergeben.

Alternative Methode zur Verwendung von Hooks in React-Klassenkomponenten

Dies ist ein einfaches Beispiel für die Verwendung von Werten aus Hooks in einer Klassenkomponente. Schauen wir uns ein Beispiel an.

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [number, setNumber] = useState(100);
  return (
    <div className="App">
      <Header hookValue={number}></Header>
    </div>
  );
}
class Header extends React.Component {
  render() {
    const someHookValue = this.props.hookValue;
    return <h1>{someHookValue}</h1>;
  }
}

Wir importieren den useState-Hook, um eine number-Zustandsvariable zu erstellen, die mit einem Zahlenwert initialisiert wird.

Die untergeordnete Komponente ist eine Komponente der Klasse Header. Wir übergeben die Zustandsvariable number, die wir mit einem Hook erstellt haben.

Dann zeigen wir diesen Wert in der untergeordneten Komponente an. Sehen Sie sich die Live-Demo auf CodeSandbox selbst an.