qu'est-ce qui se passe en réaction

HOC est une technologie avancée en réaction pour extraire la partie réutilisation logique des composants, mais HOC n'est pas une API React, c'est une méthode, une méthode qui reçoit un composant en paramètre et renvoie un composant amélioré. .

Recommandations de tutoriel associées : Tutoriel vidéo React

Quoi ? Qu'est-ce que HOC

HOC (High Order Component) est une technologie avancée en react pour extraire la partie de réutilisation logique du composant, mais HOC n'est pas un React API . C'est juste un modèle de conception, similaire au modèle de décorateur.

Plus précisément, HOC est une fonction, et la fonction accepte un composant comme paramètre et renvoie un nouveau composant.

D'un point de vue conséquentialiste, HOC équivaut à Vue en mixins(混合). En fait, la stratégie précédente de React utilisait également mixins, mais plus tard facebook s'est rendu compte que mixins causait plus de problèmes que la valeur qu'elle apportait, elle a donc supprimé mixins. Vous voulez en savoir plus

Pourquoi ? Pourquoi utiliser HOC

Regardons un exemple

import React, { Component } from 'react'class Page1 extends Component{
  componentWillMount(){
    let data = localStorage.getItem('data')    this.setState({ data })
  }

  render() {    return (
      <h2>{this.state.data}</h2>
    )
  }
} 

export default Page1

Dans cet exemple, vous devez localStorageavant de monter le composant. Obtenez la valeur de data de 🎜>, mais lorsque d'autres composants doivent également obtenir les mêmes données de localStorage pour l'affichage, chaque composant doit réécrire le code de componentWillMount, qui sera très redondant. Donc dans Vue nous utilisons habituellement :

mixins: []

Mais dans React nous devons utiliser le mode HOC

import React, { Component } from 'react'

const withStorage = WrappedComponent => {
  return class extends Component{
    componentWillMount() {
      let data = localStorage.getItem('data')
      this.setState({ data })
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} /> 
    }
  }
}

export default withStorage

Après avoir construit un HOC, c'est simple quand on l'utilise Plus, en regardant dans l'exemple initial, nous n'avons pas besoin d'écrire componentWillMount.

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}

export default withStorage(Page1)

Évidemment, il s'agit d'un modèle de décorateur, alors vous pouvez utiliser le formulaire ES7

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

@withStorage
class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}

export default Page1

Comment utiliser HOC

Scénarios d'utilisation

• Manipuler les accessoires

• Accéder à l'instance du composant via la référence

• Promouvoir l'état du composant

• Envelopper les composants avec d'autres éléments

Notes de conseils

1, nommez le composant enveloppé
Le nom est également enveloppé dans le nom d’affichage du HOC.
2. Timing
N'utilisez pas HOC dans la méthode render du composant et essayez de ne pas utiliser HOC dans d'autres cycles de vie du composant. Parce qu'un nouveau composant sera renvoyé à chaque fois lors de l'appel de HOC, donc à chaque rendu, le composant créé par le composant de niveau supérieur précédent sera démonté (démonté), puis le nouveau composant créé cette fois sera remonté (monté) , ce qui affectera l'efficacité, perd à nouveau l'état du composant et de ses sous-composants.
3. Méthodes statiques
Si vous devez utiliser les méthodes statiques du composant encapsulé, vous devez copier manuellement ces méthodes statiques, car le nouveau composant renvoyé par HOC ne contient pas les méthodes statiques du composant encapsulé.
4. ref
ne sera pas transmis au composant enveloppé

Comparaison de HOC et Mixin

Les composants d'ordre élevé appartiennent à l'idée de programmation fonctionnelle. L'existence de composants d'ordre élevé ne sera pas perçue pour les composants enveloppés, et les composants renvoyés par les composants d'ordre élevé auront des fonctions améliorées par rapport à l'original. composants. Le mode de mélange de Mixin ajoutera continuellement de nouvelles méthodes et attributs au composant. Le composant lui-même peut non seulement le détecter, mais doit même effectuer les traitements associés (tels que les conflits de noms, la maintenance de l'état). Une fois que le nombre de modules mélangés augmente, le composant entier deviendra difficile à maintenir, c'est pourquoi tant de bibliothèques React sont développées à l'aide de composants d'ordre élevé.

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!