Integration von React-Hooks in vorhandene React-Klassenkomponenten

Wie Sie bemerkt haben, bieten React-Hooks einen alternativen Ansatz zur Verwaltung von Status und Logik Reagieren Sie auf Anwendungen. Möglicherweise möchten Sie jedoch Ihre vorhandenen klassenbasierten Komponenten schrittweise migrieren, um die Vorteile von Hooks zu nutzen.

Glücklicherweise gibt es eine Lösung für diese Herausforderung: Komponenten höherer Ordnung (HOCs). HOCs bieten eine Möglichkeit, Ihre Klassenkomponente mit einer Funktion zu umschließen, die Hook-basierte Funktionalität einfügt.

Erstellen eines HOC mit Hooks

So erstellen Sie ein HOC, das einen React integriert Folgen Sie diesen Schritten:

1. Definieren Sie eine Funktion, die Ihre Klassenkomponente als Argument verwendet.
2. Erstellen Sie innerhalb dieser Funktion eine neue Komponente namens WrappedComponent.
3. Verwenden Sie innerhalb von WrappedComponent den gewünschten React-Hook, um den erforderlichen Zustand oder die erforderliche Logik zu extrahieren und zu nutzen.
4. Übergeben Sie den Rückgabewert des Hooks als Requisiten an die Klassenkomponente.
5. Gib WrappedComponent von der HOC-Funktion zurück.

Beispiel:

Angenommen, Sie haben eine Klassenkomponente namens MyDiv:

class MyDiv extends React.component {
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return 
{this.state.sampleState}
   }
}

Um einen Hook-basierten Status zu MyDiv hinzuzufügen, können Sie eine HOC:

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return ;
  }
}

Integration des HOC

Jetzt können Sie Ihre MyDiv-Klassenkomponente mit dem withMyHook HOC umschließen:

class MyComponent extends React.Component {
  render(){
    const myHookValue = this.props.myHookValue;
    return 
{myHookValue}
;
  }
}

export default withMyHook(MyComponent);

Mit dieser Technik können Sie React-Hooks nach und nach in Ihre bestehende klassenbasierte Codebasis integrieren, ohne dass erhebliche Umgestaltungen erforderlich sind.