高阶组件ReactJS

Les composants de haut niveau sont des fonctions JavaScript utilisées pour ajouter des fonctionnalités supplémentaires à des composants existants. Ces fonctions sont des fonctions pures, ce qui signifie qu'elles reçoivent des données et retournent des valeurs en fonction de ces données. Si les données changent, la fonction de haut niveau utilisera des entrées de données différentes pour s'exécuter à nouveau. Si nous voulons mettre à jour le composant retourné, nous n'avons pas besoin de modifier le HOC. Ce que nous devons faire est de changer les données que notre fonction utilise.

Les composants de haut niveau (Higher Order Component, HOC) entourent les composants "normaux" et fournissent des entrées de données supplémentaires. En réalité, c'est une fonction qui accepte un composant et retourne un autre composant qui enveloppe le composant original.

Laissez-nous voir un exemple simple pour comprendre comment ce concept fonctionne. MyHOC est une fonction de haute qualité, utilisée uniquement pour transmettre des données à MyComponent. La fonction accepte MyComponent, l'améliore avec newData, et retourne le composant amélioré qui sera affiché à l'écran.

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);

Si nous exécutons cette application, nous verrons que les données ont été transmises àMyComponent.

RemarqueLes composants de haute qualité peuvent être utilisés pour différentes fonctionnalités. Ces fonctions pures sont l'essence de la programmation fonctionnelle. Une fois que vous avez l'habitude, vous remarquerez que votre application devient de plus en plus facile à maintenir ou à mettre à jour.