Que sont les composants avancés de React ? Explication détaillée des composants avancés de React

Le contenu de cet article porte sur quels sont les composants avancés de React ? L'explication détaillée des composants avancés de React a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

1. Concepts de base

Les fonctions avancées sont des fonctions qui prennent des fonctions comme paramètres et renvoient des fonctions. De même, les composants d'ordre supérieur (HOC en abrégé) reçoivent des composants React en tant que paramètres et renvoient un nouveau composant React. Un composant d’ordre supérieur est essentiellement une fonction et non un composant. La forme fonctionnelle des composants d'ordre supérieur est la suivante :

const EnhanceComponent = higherOrderComponent(WrappedComponent)

Expliquez comment les composants d'ordre supérieur sont réutilisés à travers un exemple simple. Il existe désormais un composant MyComponent qui doit récupérer les données de LocalStorage, puis les restituer à l'interface. Généralement, nous pouvons l'implémenter comme ceci :

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

Le code est très simple, mais lorsque d'autres composants doivent également obtenir les mêmes données de LocalStorage et les afficher, chaque composant doit réécrire le code du composantWillMount, ce qui est évidemment très redondant. Jetons un coup d'œil à la réécriture de cette partie du code à l'aide de composants d'ordre supérieur.

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 est un composant d'ordre élevé, qui renvoie un nouveau composant, composantWillMount gère la logique d'obtention des données de LocalStorage de manière unifiée, puis transmet les données obtenues au. objet empaqueté via props. Le composant WrappedComponent, afin que vous puissiez utiliser directement this.props.data dans WrappedComponent pour obtenir les données qui doivent être affichées. Lorsque d'autres composants ont également besoin de cette logique, continuez à utiliser le composant d'ordre supérieur withPersistentData pour. enveloppez ces composants.

2. Scénarios d'utilisation

Les scénarios d'utilisation des composants d'ordre élevé incluent principalement les 4 suivants :
1) Manipuler les accessoires
2) Accéder aux instances de composants via ref
3) Amélioration de l'état des composants
4) Envelopper les composants avec d'autres éléments

1. Manipuler les accessoires

Avant que le composant enveloppé ne reçoive des accessoires, les composants d'ordre supérieur peuvent d'abord intercepter les accessoires et ajouter des accessoires. , supprimez ou modifiez les opérations, puis transmettez les accessoires traités au composant encapsulé. L'exemple en 1 appartient à cette situation.

2. Accédez à l'instance du composant via ref

La référence du composant d'ordre supérieur obtient la référence de l'instance de composant packagée, puis le composant d'ordre supérieur a la capacité d'exploiter directement les propriétés ou méthodes du composant packagé.

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}/>
    }
  }
}

Lorsque enveloppéComponent est rendu, la fonction de rappel de ref est exécutée. Le composant d'ordre supérieur enregistre la référence d'instance enveloppéComponent via this.wrappedInstance et appelle la méthode dans enveloppéComponent via this.wrappedInstance dans someMethod. Cette utilisation est rarement utilisée dans les projets réels, mais elle s'avère pratique lorsque la logique de réutilisation encapsulée par un composant d'ordre supérieur doit être prise en charge de manière collaborative par les méthodes ou les propriétés du composant packagé.

3. Amélioration de l'état des composants

Les composants d'ordre supérieur peuvent réaliser l'apatridie des composants empaquetés en promouvant l'état du composant empaqueté et la méthode de traitement d'état correspondante au composant d'ordre élevé lui-même. Un scénario typique consiste à utiliser des composants d'ordre élevé pour unifier les états dont les composants initialement contrôlés ont besoin pour se maintenir en composants d'ordre élevé.

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}/>
    }
  }
}

Cet exemple met à niveau l'état utilisé par l'attribut value du composant contrôlé et la fonction de rappel pour gérer les changements de valeur vers les composants d'ordre supérieur. Lorsque nous utilisons à nouveau le composant contrôlé, nous pouvons l'utiliser comme. ceci :

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. Passage de paramètres

Le paramètre d'un composant d'ordre élevé n'est pas seulement un composant, il peut également recevoir d'autres paramètres. Par exemple, dans le premier exemple, les données avec les données clés sont obtenues à partir de LocalStorage. Lorsque la clé pour obtenir les données est incertaine, le composant d'ordre supérieur withPersistentData ne répond pas aux besoins. Nous pouvons lui laisser recevoir un paramètre supplémentaire pour décider quelles données obtenir de 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} 把传递给当前组件属性继续传递给被包装的组件
      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');

La nouvelle version de withPersistentData répond au besoin d'obtenir des valeurs de clés différentes, mais dans les situations réelles, nous utilisons rarement cette méthode Au lieu de transmettre des paramètres, utilisez une forme de fonction plus flexible et plus utilisable :

HOC(...params)(WrappedComponent)

La valeur de retour de HOC(...params) est un composant d'ordre supérieur, et les paramètres requis par le composant d'ordre supérieur Les composants passent d'abord la fonction HOC. Réécrivez withPersistentData sous cette forme comme suit (remarque : cette forme de composants d'ordre supérieur est définie de manière plus concise à l'aide de fonctions fléchées) :

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. Implémentation de composants d'ordre supérieur par héritage

Précédent Les méthodes d'implémentation des composants d'ordre élevé introduites consistent à ce que les composants d'ordre supérieur traitent la logique commune, puis transmettent les propriétés pertinentes au composant packagé. Nous appelons cette méthode proxy de propriété. En plus des proxys de propriété, des composants d'ordre supérieur peuvent également être implémentés via l'héritage : la réutilisation logique peut être réalisée en héritant de composants packagés. Les composants d'ordre supérieur implémentés via l'héritage sont souvent utilisés pour le détournement de rendu. Par exemple, autorisez le rendu du composant lorsque l'utilisateur est connecté, sinon restituez un composant vide. Le code est le suivant :

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

Déterminez si l'utilisateur s'est connecté en fonction de this.props.loggedIn de WrappedComponent. S'il est connecté, appelez la méthode de rendu de WrappedComponent via super.render() pour effectuer le rendu. Le composant normalement.Sinon, renvoie une valeur nulle.L'implémentation de composants d'ordre supérieur via l'héritage est intrusive pour les composants packagés, il est facile pour le composant de sous-classe d'oublier d'appeler la méthode du composant de classe parent via super. , entraînant une perte logique. Par conséquent, lorsque vous utilisez des composants d’ordre supérieur, vous devez essayer de les implémenter via des proxys.

Recommandations associées :

Tutoriel d'introduction au framework JavaScript React super génial_Connaissances de base

Explication détaillée des paramètres MHA du composant haute disponibilité MySQL

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!