Detaillierte Erläuterung der Verwendung von React-Komponenten höherer Ordnung

Die Definition von Komponenten höherer Ordnung erfolgt analog zur Definition von Funktionen höherer Ordnung. Funktionen höherer Ordnung empfangen Funktionen als Parameter und geben eine Funktion zurück. Ebenso erhalten Komponenten höherer Ordnung eine React-Komponente als Parameter und geben eine neue React-Komponente zurück. Komponenten höherer Ordnung sind im Wesentlichen eine Funktion, keine Komponente. Stellen Sie sicher, dass Sie das nicht falsch verstehen.

Warum führt React das Konzept der Komponenten höherer Ordnung ein? Wie mächtig ist es? Lassen Sie es uns zunächst anhand eines einfachen Beispiels erklären.

Angenommen, es gibt eine Komponente MyComponent, die Daten von LocalStorage abrufen und die Daten dann an die Schnittstelle rendern muss. Wir können Komponentencode wie folgt schreiben:

import React, { Component } from 'react'
class MyComponent extends Component {
  componentWillMount() {
      let data = localStorage.getItem('data');
      this.setState({data});
  }
  
  render() {
    return <p>{this.state.data}</p>
  }
}

Der Code ist sehr einfach, aber wenn andere Komponenten dieselben Daten von LocalStorage abrufen und anzeigen müssen, müssen sie dies in jedem Komponentencode wiederholen , was offensichtlich sehr überflüssig ist. Schauen wir uns an, wie dieser Teil des Codes mithilfe von Komponenten höherer Ordnung neu geschrieben werden kann. componentWillMount

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

ist eine Komponente höherer Ordnung. Sie gibt eine neue Komponente zurück. Die Logik zum Abrufen von Daten aus withPersistentData wird einheitlich im componentWillMount der neuen Komponente verarbeitet und anschließend werden die erhaltenen Daten verarbeitet as Attribute werden an die verpackte Komponente LocalStorage übergeben, sodass WrappedComponent direkt in WrappedComponent verwendet werden kann, um die Daten zu erhalten, die angezeigt werden müssen, wie in this.props.data gezeigt. Wenn auch andere Komponenten diese Logik benötigen, verwenden Sie einfach weiterhin die Komponente MyComponent2 höherer Ordnung, um diese Komponenten zu umschließen. withPersistentData

Anhand dieses Beispiels können wir sehen, dass die Hauptfunktion von

Komponenten höherer Ordnung darin besteht, die gemeinsame Logik von Komponenten zu kapseln und zu trennen, sodass die gemeinsame Logik zwischen Komponenten besser wiederverwendet werden kann . Diese Implementierung von Komponenten höherer Ordnung ist im Wesentlichen ein Dekorator-Entwurfsmuster.

Der Parameter einer Komponente höherer Ordnung ist nicht nur eine Komponente, er kann auch andere Parameter erhalten. Beispielsweise muss die Komponente

die Daten mit dem Schlüssel gleich „name“ von LocalStorage abrufen, anstelle der fest codierten Daten mit dem Schlüssel „data“ im obigen Beispiel. Diese höherwertige Komponente MyComponent3 entspricht nicht unseren Anforderungen . Wir können es einen zusätzlichen Parameter empfangen lassen, um zu entscheiden, welche Daten von withPersistentData abgerufen werden sollen: LocalStorage

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} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
class MyComponent3 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
const MyComponent2WithPersistentData = withPersistentData(MyComponent2, 'data');
const MyComponent3WithPersistentData = withPersistentData(MyComponent3, 'name');

Die neue Version von

kann unsere Anforderungen erfüllen, die Werte verschiedener Schlüssel zu erhalten. Parameter in Komponenten höherer Ordnung können natürlich auch Funktionen sein, was wir im nächsten Abschnitt näher erläutern. withPersistentData

3. Erweiterte Verwendung

Die häufigste Funktionssignaturform von Komponenten höherer Ordnung ist wie folgt:

HOC([param])([WrappedComponent])

In dieser Form umschreiben

, wie folgt: withPersistentData

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} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
class MyComponent3 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
const MyComponent2WithPersistentData = withPersistentData('data')(MyComponent2);
const MyComponent3WithPersistentData = withPersistentData('name')(MyComponent3);

Tatsächlich unterscheidet sich das

derzeit von unserer ursprünglichen Definition von Komponenten höherer Ordnung. Es ist zu einer Funktion höherer Ordnung geworden, aber der Rückgabewert withPersistentData dieser Funktion höherer Ordnung ist eine Komponente höherer Ordnung. In dieser Form ist HOC([param])([WrappedComponent]) die eigentliche Komponente höherer Ordnung. Wir können sie uns als eine Variante einer Komponente höherer Ordnung vorstellen. Diese Form von Komponenten höherer Ordnung erscheint aufgrund ihrer einzigartigen Zweckmäßigkeit – klare Struktur (Trennung von gewöhnlichen Parametern und verpackten Komponenten) und einfache Kombination – in großer Zahl in Bibliotheken von Drittanbietern. Ein typisches Beispiel ist beispielsweise die Verbindung in React-Redux. Die Definition von connect lautet wie folgt: HOC([param])

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(WrappedComponent)

Diese Funktion verbindet eine React-Komponente mit dem Redux-Store. Während des Verbindungsprozesses übernimmt connect den von der aktuellen Komponente benötigten Status über den Funktionstypparameter

aus dem globalen Speicher und konvertiert den Status gleichzeitig über den Funktionstypparameter , die aktuelle Komponente Die verwendeten Redux-Aktionsersteller werden in Form von Requisiten an die aktuelle Komponente übergeben. mapStateToPropsmapDispatchToPropsZum Beispiel ist die Art und Weise, wie wir Komponente ComponentA mit Redux verbinden, ähnlich:

const ConnectedComponentA = connect(mapStateToProps, mapDispatchToProps)(ComponentA);

Wir können es aufteilen und betrachten:

// connect 是一个函数，返回值enhance也是一个函数
const enhance = connect(mapStateToProps, mapDispatchToProps);
// enhance是一个高阶组件
const ConnectedComponentA = enhance(ComponentA);

当多个函数的输出和它的输入类型相同时，这些函数是很容易组合到一起使用的。例如，有f，g，h三个高阶组件，都只接受一个组件作为参数，于是我们可以很方便的嵌套使用它们：f( g( h(WrappedComponent) ) )。这里可以有一个例外，即最内层的高阶组件h可以有多个参数，但其他高阶组件必须只能接收一个参数，只有这样才能保证内层的函数返回值和外层的函数参数数量一致(都只有1个)。

例如我们将connect和另一个打印日志的高阶组件withLog联合使用：

const ConnectedComponentA = connect(mapStateToProps)(withLog(ComponentA));

这里我们定义一个工具函数：compose(...functions)，调用compose(f, g, h) 等价于 (...args) => f(g(h(...args)))。用compose函数我们可以把高阶组件嵌套的写法打平：

const enhance = compose(
  connect(mapStateToProps),
  withLog
);
const ConnectedComponentA = enhance(ComponentA);

像Redux等很多第三方库都提供了compose的实现，compose结合高阶组件使用，可以显著提高代码的可读性和逻辑的清晰度。

4.与父组件区别

有些同学可能会觉得高阶组件有些类似父组件的使用。例如，我们完全可以把高阶组件中的逻辑放到一个父组件中去执行，执行完成的结果再传递给子组件。从逻辑的执行流程上来看，高阶组件确实和父组件比较相像，但是高阶组件强调的是逻辑的抽象。高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；如果逻辑是与DOM不直接相关的，那么这部分逻辑适合使用高阶组件抽象，如数据校验、请求发送等。

5. 注意事项

1）不要在组件的render方法中使用高阶组件，尽量也不要在组件的其他生命周期方法中使用高阶组件。因为高阶组件每次都会返回一个新的组件，在render中使用会导致每次渲染出来的组件都不相等（===），于是每次render，组件都会卸载（unmount），然后重新挂载（mount），既影响了效率，又丢失了组件及其子组件的状态。高阶组件最适合使用的地方是在组件定义的外部，这样就不会受到组件生命周期的影响了。

2）如果需要使用被包装组件的静态方法，那么必须手动拷贝这些静态方法。因为高阶组件返回的新组件，是不包含被包装组件的静态方法。hoist-non-react-statics可以帮助我们方便的拷贝组件所有的自定义静态方法。有兴趣的同学可以自行了解。

3）Refs不会被传递给被包装组件。尽管在定义高阶组件时，我们会把所有的属性都传递给被包装组件，但是ref并不会传递给被包装组件。如果你在高阶组件的返回组件中定义了ref，那么它指向的是这个返回的新组件，而不是内部被包装的组件。如果你希望获取被包装组件的引用，你可以把ref的回调函数定义成一个普通属性（给它一个ref以外的名字）。下面的例子就用inputRef这个属性名代替了常规的ref命名：

function FocusInput({ inputRef, ...rest }) {
  return <input>;
}
//enhance 是一个高阶组件
const EnhanceInput = enhance(FocusInput);
// 在一个组件的render方法中...
return (<enhanceinput> {
    this.input = input
  }
}>)
// 让FocusInput自动获取焦点
this.input.focus();</enhanceinput>

下篇预告：

React 深入系列7：React 常用模式

---

我的新书《React进阶之路》已上市，请大家多多支持！
链接：京东 当当

React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。

1. 基本概念

高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都被经常使用。在项目中用好高阶组件，可以显著提高代码质量。

Die Definition von Komponenten höherer Ordnung erfolgt analog zur Definition von Funktionen höherer Ordnung. Funktionen höherer Ordnung empfangen Funktionen als Parameter und geben eine Funktion zurück. Ebenso erhalten Komponenten höherer Ordnung eine React-Komponente als Parameter und geben eine neue React-Komponente zurück. Komponenten höherer Ordnung sind im Wesentlichen eine Funktion, keine Komponente. Stellen Sie sicher, dass Sie das nicht falsch verstehen.

2. Anwendungsszenarien

Warum führt React das Konzept der Komponenten höherer Ordnung ein? Wie mächtig ist es? Lassen Sie es uns zunächst anhand eines einfachen Beispiels erklären.

Angenommen, es gibt eine Komponente MyComponent, die Daten von LocalStorage abrufen und die Daten dann an die Schnittstelle rendern muss. Wir können Komponentencode wie folgt schreiben:

import React, { Component } from 'react'
class MyComponent extends Component {
  componentWillMount() {
      let data = localStorage.getItem('data');
      this.setState({data});
  }
  
  render() {
    return <p>{this.state.data}</p>
  }
}

Der Code ist sehr einfach, aber wenn andere Komponenten dieselben Daten von LocalStorage abrufen und anzeigen müssen, müssen sie dies in jedem Komponentencode wiederholen , was offensichtlich sehr überflüssig ist. Schauen wir uns an, wie dieser Teil des Codes mithilfe von Komponenten höherer Ordnung neu geschrieben werden kann. componentWillMount

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

ist eine Komponente höherer Ordnung. Sie gibt eine neue Komponente zurück. Die Logik zum Abrufen von Daten aus withPersistentData wird einheitlich im componentWillMount der neuen Komponente verarbeitet und anschließend werden die erhaltenen Daten verarbeitet as Attribute werden an die verpackte Komponente LocalStorage übergeben, sodass WrappedComponent direkt in WrappedComponent verwendet werden kann, um die Daten zu erhalten, die angezeigt werden müssen, wie in this.props.data gezeigt. Wenn auch andere Komponenten diese Logik benötigen, verwenden Sie einfach weiterhin die Komponente MyComponent2 höherer Ordnung, um diese Komponenten zu umschließen. withPersistentData

Anhand dieses Beispiels können wir sehen, dass die Hauptfunktion von

Komponenten höherer Ordnung darin besteht, die gemeinsame Logik von Komponenten zu kapseln und zu trennen, sodass die gemeinsame Logik zwischen Komponenten besser wiederverwendet werden kann . Diese Implementierung von Komponenten höherer Ordnung ist im Wesentlichen ein Dekorator-Entwurfsmuster.

Der Parameter einer Komponente höherer Ordnung ist nicht nur eine Komponente, er kann auch andere Parameter erhalten. Beispielsweise muss die Komponente

die Daten mit dem Schlüssel gleich „name“ von LocalStorage abrufen, anstelle der fest codierten Daten mit dem Schlüssel „data“ im obigen Beispiel. Diese höherwertige Komponente MyComponent3 entspricht nicht unseren Anforderungen . Wir können es einen zusätzlichen Parameter empfangen lassen, um zu entscheiden, welche Daten von withPersistentData abgerufen werden sollen: LocalStorage

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} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
class MyComponent3 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
const MyComponent2WithPersistentData = withPersistentData(MyComponent2, 'data');
const MyComponent3WithPersistentData = withPersistentData(MyComponent3, 'name');

Die neue Version von

kann unsere Anforderungen erfüllen, die Werte verschiedener Schlüssel zu erhalten. Parameter in Komponenten höherer Ordnung können natürlich auch Funktionen sein, was wir im nächsten Abschnitt näher erläutern. withPersistentData

3. Erweiterte Verwendung

Die häufigste Funktionssignaturform von Komponenten höherer Ordnung ist wie folgt:

HOC([param])([WrappedComponent])

In dieser Form umschreiben

, wie folgt: withPersistentData

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} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
class MyComponent3 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
const MyComponent2WithPersistentData = withPersistentData('data')(MyComponent2);
const MyComponent3WithPersistentData = withPersistentData('name')(MyComponent3);

Tatsächlich unterscheidet sich das

derzeit von unserer ursprünglichen Definition von Komponenten höherer Ordnung. Es ist zu einer Funktion höherer Ordnung geworden, aber der Rückgabewert dieser Funktion höherer Ordnung ist eine Komponente höherer Ordnung. withPersistentDataIn dieser Form ist HOC([param])([WrappedComponent]) die eigentliche Komponente höherer Ordnung. Wir können sie uns als eine Variante einer Komponente höherer Ordnung vorstellen. Diese Form von Komponenten höherer Ordnung erscheint aufgrund ihrer einzigartigen Zweckmäßigkeit – klare Struktur (Trennung von gewöhnlichen Parametern und verpackten Komponenten) und einfache Kombination – in großer Zahl in Bibliotheken von Drittanbietern. Ein typisches Beispiel ist beispielsweise die Verbindung in React-Redux. Die Definition von connect lautet wie folgt: HOC([param])

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(WrappedComponent)

Diese Funktion verbindet eine React-Komponente mit dem Redux-Store. Während des Verbindungsprozesses übernimmt connect den von der aktuellen Komponente benötigten Status über den Funktionstypparameter

aus dem globalen Speicher und konvertiert den Status gleichzeitig über den Funktionstypparameter , die aktuelle Komponente Die verwendeten Redux-Aktionsersteller werden in Form von Requisiten an die aktuelle Komponente übergeben. mapStateToPropsmapDispatchToPropsZum Beispiel ist die Art und Weise, wie wir Komponente ComponentA mit Redux verbinden, ähnlich:

const ConnectedComponentA = connect(mapStateToProps, mapDispatchToProps)(ComponentA);

Wir können es aufteilen und betrachten:

// connect 是一个函数，返回值enhance也是一个函数
const enhance = connect(mapStateToProps, mapDispatchToProps);
// enhance是一个高阶组件
const ConnectedComponentA = enhance(ComponentA);

Bei der Ausgabe mehrerer Funktionen Diese Funktionen lassen sich leicht kombinieren, wenn ihre Eingabetypen gleich sind. Beispielsweise gibt es drei höherwertige Komponenten f, g, h, die alle nur eine Komponente als Parameter akzeptieren, sodass wir sie leicht verschachteln können:

. Hier kann es eine Ausnahme geben, das heißt, die innerste Komponente h kann mehrere Parameter haben, andere Komponenten höherer Ordnung dürfen jedoch nur einen Parameter erhalten Funktionsparameter der äußeren Schicht gewährleistet sein (jeweils nur 1).

f( g( h(WrappedComponent) ) )Zum Beispiel verwenden wir die Verbindung mit einer anderen höherwertigen Komponente

, die Protokolle druckt:

const ConnectedComponentA = connect(mapStateToProps)(withLog(ComponentA));

这里我们定义一个工具函数：compose(...functions)，调用compose(f, g, h) 等价于 (...args) => f(g(h(...args)))。用compose函数我们可以把高阶组件嵌套的写法打平：

const enhance = compose(
  connect(mapStateToProps),
  withLog
);
const ConnectedComponentA = enhance(ComponentA);

像Redux等很多第三方库都提供了compose的实现，compose结合高阶组件使用，可以显著提高代码的可读性和逻辑的清晰度。

4.与父组件区别

有些同学可能会觉得高阶组件有些类似父组件的使用。例如，我们完全可以把高阶组件中的逻辑放到一个父组件中去执行，执行完成的结果再传递给子组件。从逻辑的执行流程上来看，高阶组件确实和父组件比较相像，但是高阶组件强调的是逻辑的抽象。高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；如果逻辑是与DOM不直接相关的，那么这部分逻辑适合使用高阶组件抽象，如数据校验、请求发送等。

5. 注意事项

1）不要在组件的render方法中使用高阶组件，尽量也不要在组件的其他生命周期方法中使用高阶组件。因为高阶组件每次都会返回一个新的组件，在render中使用会导致每次渲染出来的组件都不相等（===），于是每次render，组件都会卸载（unmount），然后重新挂载（mount），既影响了效率，又丢失了组件及其子组件的状态。高阶组件最适合使用的地方是在组件定义的外部，这样就不会受到组件生命周期的影响了。

2）如果需要使用被包装组件的静态方法，那么必须手动拷贝这些静态方法。因为高阶组件返回的新组件，是不包含被包装组件的静态方法。hoist-non-react-statics可以帮助我们方便的拷贝组件所有的自定义静态方法。有兴趣的同学可以自行了解。

3）Refs不会被传递给被包装组件。尽管在定义高阶组件时，我们会把所有的属性都传递给被包装组件，但是ref并不会传递给被包装组件。如果你在高阶组件的返回组件中定义了ref，那么它指向的是这个返回的新组件，而不是内部被包装的组件。如果你希望获取被包装组件的引用，你可以把ref的回调函数定义成一个普通属性（给它一个ref以外的名字）。下面的例子就用inputRef这个属性名代替了常规的ref命名：

function FocusInput({ inputRef, ...rest }) {
  return <input>;
}
//enhance 是一个高阶组件
const EnhanceInput = enhance(FocusInput);
// 在一个组件的render方法中...
return (<enhanceinput> {
    this.input = input
  }
}>)
// 让FocusInput自动获取焦点
this.input.focus();</enhanceinput>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

react实现选中li高亮步骤详解

EasyCanvas绘图库在Pixeler项目开发中使用实战总结

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von React-Komponenten höherer Ordnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!