ReactJS 高阶组件

Higher-Order Components sind JavaScript-Funktionen, die dazu dienen, bestehende Komponenten um zusätzliche Funktionen zu erweitern. Diese Funktionen sind reine Funktionen, das bedeutet, sie nehmen Daten als Eingabe und geben entsprechend Werte zurück. Ändert sich die Daten, führt die Higher-Order-Funktion einen Neustart mit verschiedenen Dateninputs durch. Wenn wir die zurückgegebene Komponente aktualisieren möchten, müssen wir den HOC nicht ändern. Wir müssen nur die Daten ändern, die unsere Funktion verwendet.

Higher-Order Components (HOC) umgeben 'normale' Komponenten und bieten zusätzliche Dateninputs. Es ist tatsächlich eine Funktion, die ein Komponentenobjekt akzeptiert und eine andere Funktion zurückgibt, die den ursprünglichen Komponenten umschließt.

Lassen Sie uns einen einfachen Beispiel ansehen, um zu verstehen, wie dieses Konzept funktioniert. MyHOC ist eine höhere Funktion, die nur zur Übermittlung von Daten an MyComponent dient. Diese Funktion akzeptiert MyComponent, stärkt es mit newData und gibt die verbesserte Komponente zurück, die auf dem Bildschirm dargestellt wird.

import React from 'react';
var newData = {
　　　data: 'Data from HOC...'
}
var MyHOC = ComposedComponent => class extends React.Component {
　　　componentDidMount() {
　　　　　　this.setState({
　　　　　　　　　data: newData.data
　　　　　　);
　　　}
　　　render() {
　　　　　　return <ComposedComponent {...this.props} {...this.state}>　/};
　　　}
};
class MyComponent extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1{this.props.data}</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default MyHOC(MyComponent);

Wenn das Programm ausgeführt wird, werden wir sehen, dass die Daten anMyComponent.

HinweisHochstufige Komponenten können für verschiedene Funktionen verwendet werden. Diese reinen Funktionen sind das Wesen der funktionalen Programmierung. Sobald Sie daran gewöhnt sind, werden Sie bemerken, dass Ihre Anwendung immer einfacher zu warten oder zu aktualisieren ist.