Beispiele für die Verwendung von Komponenten höherer Ordnung in React

Der Inhalt dieses Artikels befasst sich mit den Verwendungsbeispielen von High-Level-Komponenten in React. Ich hoffe, dass er für Freunde hilfreich ist.

Komponenten höherer Ordnung

• HOC ist keine Standard-API von React.

• HOC ist eine Funktion.

• HOC gibt ein Component zurück.

Beispiel:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Nutzungsszenario

Code-Wiederverwendung

Ähnlich dem Mixin vor React 0.15.

HOC kann verwendet werden, wenn mehrere Komponenten denselben Code oder dieselbe Methode verwenden.

Beispiel:

import React, { PureComponent } from 'react';

const Common = (WrapComponent) => {
  return (
    <div>
      <h1>Title</h1>
      <WrapComponent />
    </div>
  );
};

const Header = () => <div>Header</div>;
const Footer = () => <div>Footer</div>;

export default class extends PureComponent {
  render() {
    return (
      <div>
        <div>
          <p>Header Component</p>
          {Common(Header)}
        </div>
        <hr />
        <div>
          <p>Footer Component</p>
          {Common(Footer)}
        </div>
      </div>
    );
  }
}

Online-Beispiel

Abstrakte Zustands- und Änderungs-Requisiten

können umschlossen werden WrappedComponent Der öffentliche Zustand der Komponenten wird abstrahiert.

Requisiten für Änderungen, Hinzufügungen usw. können durch die von WrappedComponent verpackte Komponente weitergeleitet werden.

Beispiel:

const HOComp = (WrappedComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {name: ''};
    }

    componentDidMount() {
      this.setState({name: WrappedComponent.displayName || WrappedComponent.name || 'Component';});
    }

    return <WrappedComponent name={this.state.name} {...this.props}/>
  }
}

Rendering-Hijack

Bedingtes Rendering. Geben Sie den Inhalt in Xuanran basierend auf Requisiten oder staatlichen Bedingungen zurück.

Beispiel:

const HOComp = (WrappedComponent) => {
  return class Enhancer extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}

Umgekehrte Vererbung

Die zurückgegebene Komponentenklasse höherer Ordnung (Enhancer) erbt WrappedComponent.

Beispiel:

const EnchanceComponent = (WrappedCompopnent) => {
  return class extends WrappedCompopnent {
    constructor(props) {
      super(props);
      this.state = { error: '' };
    }
    componentDidMount() {
      /*do something*/
      super.componentDidMount();
    }
    render() {
      if (this.state.error) {
        return <p>{this.state.error}</p>;
      } else {
        return super.render();
      }
    }
  }
};

Online-Beispiel

Das obige ist der detaillierte Inhalt vonBeispiele für die Verwendung von Komponenten höherer Ordnung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!