Was sind erweiterte React-Komponenten? Detaillierte Erläuterung der erweiterten React-Komponenten

Der Inhalt dieses Artikels befasst sich mit den erweiterten Komponenten von React. Die ausführliche Erläuterung der erweiterten Komponenten von React hat einen gewissen Referenzwert. Freunde in Not können darauf zurückgreifen.

1. Grundkonzepte

Erweiterte Funktionen sind Funktionen, die Funktionen als Parameter übernehmen und Funktionen zurückgeben. Ebenso erhalten Komponenten höherer Ordnung (kurz HOC) React-Komponenten als Parameter und geben eine neue React-Komponente zurück. Eine Komponente höherer Ordnung ist im Wesentlichen eine Funktion, keine Komponente. Die Funktionsform von Komponenten höherer Ordnung lautet wie folgt:

const EnhanceComponent = higherOrderComponent(WrappedComponent)

Erklären Sie anhand eines einfachen Beispiels, wie Komponenten höherer Ordnung wiederverwendet werden. Jetzt gibt es eine Komponente MyComponent, die Daten von LocalStorage abrufen und sie dann an die Schnittstelle rendern muss. Im Allgemeinen können wir es so implementieren:

import React, { Component } from 'react'

class MyComponent extends Component {
  componentWillMount() {
    let data = localStorage.getItem('data');
    this.setState({data});
  }
  render() {
    return(
      <div>{this.state.data}</div>
    )
  }
}

Der Code ist sehr einfach, aber wenn auch andere Komponenten dieselben Daten von LocalStorage abrufen und anzeigen müssen, muss jede Komponente den Code in ComponentWillMount neu schreiben ist offensichtlich sehr überflüssig. Werfen wir einen Blick darauf, diesen Teil des Codes mithilfe von Komponenten höherer Ordnung neu zu schreiben.

import React, { Component } from 'react'

function withPersistentData(WrappedComponent) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem('data');
      this.setState({data});
    }
    render() {
      // 通过{ ...this.props} 把传递给当前组件属性继续传递给被包装的组件
      return <WrappedComponent data={this.state.data} {...this.props}/>
    }
  }
}

class MyComponent extends Component{
  render() {
    return <p>{this.props.data}</p>
  }
}

const MyComponentWithPersistentData = withPersistentData(MyComponent);

withPersistentData ist eine Komponente höherer Ordnung. In der neuen Komponente übernimmt ComponentWillMount die Logik zum Abrufen von Daten von LocalStorage und übergibt die erhaltenen Daten dann über Props Auf diese Weise können Sie this.props.data direkt in WrappedComponent verwenden, um die anzuzeigenden Daten abzurufen. Wenn andere Komponenten diese Logik ebenfalls benötigen, verwenden Sie weiterhin die höherwertige Komponente withPersistentData, um diese Komponenten zu verpacken.

2. Nutzungsszenarien

Die Nutzungsszenarien von Komponenten höherer Ordnung umfassen hauptsächlich die folgenden 4:
1) Requisiten manipulieren
2) Zugriff auf Komponenteninstanzen über Ref
3) Verbesserung des Komponentenstatus
4) Komponenten mit anderen Elementen umschließen

1. Requisiten manipulieren

Bevor die umhüllte Komponente Requisiten erhält, können Komponenten höherer Ordnung zuerst Requisiten abfangen und Requisiten hinzufügen. , Lösch- oder Änderungsvorgänge und übergeben Sie dann die verarbeiteten Requisiten an die verpackte Komponente. Das Beispiel in 1 gehört zu dieser Situation.

2. Greifen Sie über ref auf die Komponenteninstanz zu.

Ref der Komponente höherer Ordnung erhält die Referenz der gepackten Komponenteninstanz, und dann hat die Komponente höherer Ordnung die Möglichkeit, die Eigenschaften oder direkt zu bedienen Methoden der verpackten Komponente.

import React, { Component } from 'react'

function withRef(wrappedComponent) {
  return class extends Component{
    constructor(props) {
      super(props);
      this.someMethod = this.someMethod.bind(this);
    }

    someMethod() {
      this.wrappedInstance.comeMethodInWrappedComponent();
    }

    render() {
      // 为被包装组件添加 ref 属性，从而获取组件实例并赋值给 this.wrappedInstance
      return <wrappedComponent ref={(instance) => { this.wrappedInstance = instance }} {...this.props}/>
    }
  }
}

Wenn WrappedComponent gerendert wird, wird die Rückruffunktion von Ref ausgeführt. Die Komponente höherer Ordnung speichert die WrappedComponent-Instanzreferenz über this.wrappedInstance und ruft die Methode in WrappedComponent über This.wrappedInstance in SomeMethod auf. Diese Verwendung wird in tatsächlichen Projekten selten verwendet, ist jedoch nützlich, wenn die von einer Komponente höherer Ordnung gekapselte Wiederverwendungslogik gemeinsam durch die Methoden oder Eigenschaften der gepackten Komponente unterstützt werden muss.

3. Verbesserung des Komponentenzustands

Komponenten höherer Ordnung können die Zustandslosigkeit verpackter Komponenten realisieren, indem sie den Zustand der verpackten Komponente und die entsprechende Zustandsverarbeitungsmethode auf die Komponente höherer Ordnung selbst übertragen. Ein typisches Szenario besteht darin, Komponenten höherer Ordnung zu verwenden, um die Zustände, die ursprünglich gesteuerte Komponenten benötigen, um sich selbst aufrechtzuerhalten, in Komponenten höherer Ordnung zu vereinen.

import React, { Component } from 'react'

function withRef(wrappedComponent) {
  return class extends Component{
    constructor(props) {
      super(props);
      this.state = {
        value: ''
      }
      this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(event) {
      this.this.setState({
        value: event.EventTarget.value
      })
    }

    render() {
      // newProps保存受控组件需要使用的属性和事件处理函数
      const newProps = {
        controlledProps: {
          value: this.state.value,
          onChange: this.handleValueChange
        }
      }
      return <wrappedComponent {...this.props} {...newProps}/>
    }
  }
}

Dieses Beispiel aktualisiert den Status, der vom Wertattribut der gesteuerten Komponente und der Rückruffunktion zur Verarbeitung von Wertänderungen an Komponenten höherer Ordnung verwendet wird. Wenn wir die gesteuerte Komponente erneut verwenden, können wir sie wie folgt verwenden:

import React, { Component } from 'react'

function withControlledState(wrappedComponent) {
  return class extends Component{
    constructor(props) {
      super(props);
      this.state = {
        value: ''
      }
      this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(event) {
      this.this.setState({
        value: event.EventTarget.value
      })
    }

    render() {
      // newProps保存受控组件需要使用的属性和事件处理函数
      const newProps = {
        controlledProps: {
          value: this.state.value,
          onChange: this.handleValueChange
        }
      }
      return <wrappedComponent {...this.props} {...newProps}/>
    }
  }
}


class  SimpleControlledComponent extends React.Component {
  render() {
    // 此时的 SimpleControlledComponent 为无状态组件，状态由高阶组件维护
    return <input name="simple" {...this.props.controlledProps}/>
  }
}

const ComponentWithControlledState = withControlledState(SimpleControlledComponent);

3. Parameterübergabe

Der Parameter einer höherwertigen Komponente ist nicht nur eine Komponente, er kann auch andere Parameter empfangen. Im ersten Beispiel werden die Daten mit Schlüsseldaten beispielsweise von LocalStorage abgerufen. Wenn der Schlüssel zum Abrufen der Daten unsicher ist, erfüllt die höherwertige Komponente withPersistentData nicht die Anforderungen. Wir können einen zusätzlichen Parameter erhalten, um zu entscheiden, welche Daten von LocalStorage abgerufen werden sollen:

import React, { Component } from 'react'

function withPersistentData(WrappedComponent, key) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
      this.setState({ data });
    }
    render() {
      // 通过{ ...this.props} 把传递给当前组件属性继续传递给被包装的组件
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent extends Component {
  render() {
    return <p>{this.props.data}</p>
  }
}
// 获取 key='data' 的数据
const MyComponent1WithPersistentData = withPersistentData(MyComponent, 'data');

// 获取 key='name' 的数据
const MyComponent2WithPersistentData = withPersistentData(MyComponent, 'name');

Die neue Version von withPersistentData erfüllt den Bedarf, unterschiedliche Schlüsselwerte zu erhalten, aber in tatsächlichen Situationen verwenden wir diese Methode selten zum Übergeben Parameter, nimmt jedoch eine flexiblere und benutzerfreundlichere Funktionsform an:

HOC(...params)(WrappedComponent)

HOC(...params) Der Rückgabewert ist eine Komponente höherer Ordnung. Die von der Komponente höherer Ordnung benötigten Parameter dienen der Übergabe des HOC Funktion zuerst. Schreiben Sie withPersistentData in dieser Form wie folgt um (Hinweis: Diese Form einer Komponente höherer Ordnung wird mithilfe von Pfeilfunktionen präziser definiert):

import React, { Component } from 'react'

const withPersistentData = (key) => (WrappedComponent) => {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
      this.setState({ data });
    }
    render() {
      // 通过{ ...this.props} 把传递给当前组件属性继续传递给被包装的组件
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent extends Component {
  render() {
    return <p>{this.props.data}</p>
  }
}
// 获取 key='data' 的数据
const MyComponent1WithPersistentData = withPersistentData('data')(MyComponent);

// 获取 key='name' 的数据
const MyComponent2WithPersistentData = withPersistentData('name')(MyComponent);

4. Implementierung hochwertiger Komponenten durch Vererbung

Wie eingeführt Früher Die Implementierungsmethode von Komponenten höherer Ordnung besteht darin, dass die Komponenten höherer Ordnung die gemeinsame Logik verarbeiten und dann die relevanten Eigenschaften an die gepackte Komponente übergeben. Wir nennen diese Methode Eigenschafts-Proxy. Neben Eigenschafts-Proxys können auch Komponenten höherer Ordnung durch Vererbung implementiert werden: Die Wiederverwendung von Logik kann durch Vererbung gepackter Komponenten erreicht werden. Durch Vererbung implementierte Komponenten höherer Ordnung werden häufig für Rendering-Hijacking verwendet. Lassen Sie beispielsweise zu, dass die Komponente gerendert wird, wenn der Benutzer angemeldet ist, andernfalls wird eine leere Komponente gerendert. Der Code lautet wie folgt:

function withAuth(WrappedComponent) {
  return class extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render();
      } else {
        return null;
      }
    }
  }
}

Bestimmen Sie anhand von this.props.loggedIn von WrappedComponent, ob sich der Benutzer angemeldet hat. Rufen Sie bei der Anmeldung die Rendermethode von WrappedComponent über super.render() auf, um die Komponente zu rendern Normalerweise wird eine Null zurückgegeben. Die Implementierung von Komponenten höherer Ordnung beeinträchtigt die Verwendung mehrerer Komponenten höherer Ordnung im Logikverlust. Wenn Sie Komponenten höherer Ordnung verwenden, sollten Sie daher versuchen, diese über Proxys zu implementieren.

Verwandte Empfehlungen:

Super tolles Einführungs-Tutorial zum JavaScript React Framework_Grundkenntnisse

Detaillierte Erklärung der MHA-Parameter der MySQL-Hochverfügbarkeitskomponente

Das obige ist der detaillierte Inhalt vonWas sind erweiterte React-Komponenten? Detaillierte Erläuterung der erweiterten React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!