Explication détaillée de l'utilisation des composants d'ordre supérieur de React

La définition des composants d'ordre supérieur est analogue à la définition des fonctions d'ordre supérieur. Les fonctions d'ordre supérieur reçoivent des fonctions en tant que paramètres et renvoient une fonction. De même, les composants d'ordre supérieur reçoivent un composant React en tant que paramètre et renvoient un nouveau composant React. Les composants d'ordre élevé sont essentiellement une fonction, pas un composant. Assurez-vous de ne pas vous tromper.

Pourquoi React introduit-il le concept de composants d'ordre supérieur ? Quelle est sa puissance ? Expliquons-le d’abord avec un exemple simple.

Supposons qu'il existe un composant MyComponent qui doit obtenir des données de LocalStorage, puis restituer les données à l'interface. Nous pouvons écrire le code du composant comme ceci :

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

Le code est très simple, mais lorsqu'il y a d'autres composants qui doivent également obtenir les mêmes données de LocalStorage et les afficher, ils doivent répéter componentWillMount dans chaque composant. Le code qu'il contient est évidemment très redondant. Voyons comment cette partie du code peut être réécrite à 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} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
}
const MyComponentWithPersistentData = withPersistentData(MyComponent2)

withPersistentData est un composant d'ordre élevé. Il renvoie un nouveau composant. La logique d'obtention des données de componentWillMount est unifiée dans celle du nouveau composant LocalStorage, puis les données obtenues sont. traitées. Les données sont transmises au composant encapsulé WrappedComponent sous forme d'attributs, de sorte que WrappedComponent puisse être utilisé directement dans this.props.data pour obtenir les données qui doivent être affichées, comme indiqué dans MyComponent2. Lorsque d'autres composants ont également besoin de cette logique, continuez simplement à utiliser le withPersistentData composant d'ordre supérieur pour envelopper ces composants.

A travers cet exemple, nous pouvons voir que la fonction principale des composants d'ordre élevé est d'encapsuler et de séparer la logique commune des composants, afin que la logique commune puisse être mieux réutilisée entre les composants . Cette implémentation de composants d’ordre supérieur est essentiellement un modèle de conception de décorateur.

Le paramètre d'un composant d'ordre supérieur n'est pas qu'un composant, il peut également recevoir d'autres paramètres. Par exemple, le composant MyComponent3 doit obtenir les données avec une clé égale au nom de LocalStorage au lieu des données codées en dur avec une clé égale aux données dans l'exemple ci-dessus. Ce composant d'ordre supérieur withPersistentData ne répond pas à nos besoins. . Nous pouvons lui laisser recevoir un paramètre supplémentaire pour décider de quelles données obtenir 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');

La nouvelle version de withPersistentData peut répondre à notre besoin d'obtenir les valeurs de différentes clés. Les paramètres des composants d’ordre supérieur peuvent bien entendu également être des fonctions, que nous expliquerons plus en détail dans la section suivante.

3. Utilisation avancée

La forme de signature de fonction la plus courante des composants d'ordre supérieur est la suivante :

HOC([param])([WrappedComponent])

Réécrire sous cette forme. withPersistentData, comme suit :

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

En fait, withPersistentData à l'heure actuelle est différent de notre définition originale des composants d'ordre élevé. C'est devenue une fonction d'ordre supérieur, mais la valeur de retour de cette fonction d'ordre supérieur est un composant d'ordre supérieur. HOC([param])([WrappedComponent])Sous cette forme, HOC([param]) est le véritable composant d'ordre élevé. On peut le considérer comme une variante du composant d'ordre élevé. Cette forme de composants d'ordre élevé apparaît en grand nombre dans les bibliothèques tierces en raison de sa commodité unique : structure claire (séparation des paramètres ordinaires et des composants encapsulés) et combinaison facile. Par exemple, connect dans React-Redux est un exemple typique. La définition de connect est la suivante :

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

Cette fonction connectera un composant React au store Redux. Pendant le processus de connexion, connect prend l'état requis par le composant actuel dans le magasin global via le paramètre de type de fonction mapStateToProps et convertit l'état en accessoires du composant actuel en même temps, via le paramètre de type de fonction , le composant actuel Les créateurs d'actions Redux utilisés sont transmis au composant actuel sous forme d'accessoires. mapDispatchToProps

Par exemple, la façon dont nous connectons le composant ComponentA à Redux est similaire à :

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

Nous pouvons le diviser et le regarder :

// 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）中都被经常使用。在项目中用好高阶组件，可以显著提高代码质量。

La définition des composants d'ordre supérieur est analogue à la définition des fonctions d'ordre supérieur. Les fonctions d'ordre supérieur reçoivent des fonctions en tant que paramètres et renvoient une fonction. De même, les composants d'ordre supérieur reçoivent un composant React en tant que paramètre et renvoient un nouveau composant React. Les composants d'ordre élevé sont essentiellement une fonction, pas un composant. Assurez-vous de ne pas vous tromper.

2. Scénarios d'application

Pourquoi React introduit-il le concept de composants d'ordre supérieur ? Quelle est sa puissance ? Expliquons-le d’abord avec un exemple simple.

Supposons qu'il existe un composant MyComponent qui doit obtenir des données de LocalStorage, puis restituer les données à l'interface. Nous pouvons écrire le code du composant comme ceci :

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

Le code est très simple, mais lorsqu'il y a d'autres composants qui doivent également obtenir les mêmes données de LocalStorage et les afficher, ils doivent répéter componentWillMount dans chaque composant. Le code qu'il contient est évidemment très redondant. Voyons comment cette partie du code peut être réécrite à 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} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
}
const MyComponentWithPersistentData = withPersistentData(MyComponent2)

withPersistentData est un composant d'ordre élevé. Il renvoie un nouveau composant. La logique d'obtention des données de componentWillMount est unifiée dans celle du nouveau composant LocalStorage, puis les données obtenues sont. traitées. Les données sont transmises au composant encapsulé WrappedComponent sous forme d'attributs, de sorte que WrappedComponent puisse être utilisé directement dans this.props.data pour obtenir les données qui doivent être affichées, comme indiqué dans MyComponent2. Lorsque d'autres composants ont également besoin de cette logique, continuez simplement à utiliser le withPersistentData composant d'ordre supérieur pour envelopper ces composants.

A travers cet exemple, nous pouvons voir que la fonction principale des composants d'ordre élevé est d'encapsuler et de séparer la logique commune des composants, afin que la logique commune puisse être mieux réutilisée entre les composants . Cette implémentation de composants d’ordre supérieur est essentiellement un modèle de conception de décorateur.

Le paramètre d'un composant d'ordre supérieur n'est pas qu'un composant, il peut également recevoir d'autres paramètres. Par exemple, le composant MyComponent3 doit obtenir les données avec une clé égale au nom de LocalStorage au lieu des données codées en dur avec une clé égale aux données dans l'exemple ci-dessus. Ce composant d'ordre supérieur withPersistentData ne répond pas à nos besoins. . Nous pouvons lui laisser recevoir un paramètre supplémentaire pour décider de quelles données obtenir 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');

La nouvelle version de withPersistentData peut répondre à notre besoin d'obtenir les valeurs de différentes clés. Les paramètres des composants d’ordre supérieur peuvent bien entendu également être des fonctions, que nous expliquerons plus en détail dans la section suivante.

3. Utilisation avancée

La forme de signature de fonction la plus courante des composants d'ordre supérieur est la suivante :

HOC([param])([WrappedComponent])

Réécrire sous cette forme. withPersistentData, comme suit :

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

En fait, withPersistentData à l'heure actuelle est différent de notre définition originale des composants d'ordre élevé. C'est devenue une fonction d'ordre supérieur, mais la valeur de retour de cette fonction d'ordre supérieur est un composant d'ordre supérieur. HOC([param])([WrappedComponent])Sous cette forme, HOC([param]) est le véritable composant d'ordre élevé. On peut le considérer comme une variante du composant d'ordre élevé. Cette forme de composants d'ordre élevé apparaît en grand nombre dans les bibliothèques tierces en raison de sa commodité unique : structure claire (séparation des paramètres ordinaires et des composants encapsulés) et combinaison facile. Par exemple, connect dans React-Redux est un exemple typique. La définition de connect est la suivante :

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

Cette fonction connectera un composant React au store Redux. Pendant le processus de connexion, connect prend l'état requis par le composant actuel dans le magasin global via le paramètre de type de fonction mapStateToProps et convertit l'état en accessoires du composant actuel en même temps, via le paramètre de type de fonction , le composant actuel Les créateurs d'actions Redux utilisés sont transmis au composant actuel sous forme d'accessoires. mapDispatchToProps

Par exemple, la façon dont nous connectons le composant ComponentA à Redux est similaire à :

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

Nous pouvons le diviser et le regarder :

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

Quand il y en a beaucoup. Lorsque la sortie d'une fonction est du même type que son entrée, ces fonctions sont facilement combinées et utilisées ensemble. Par exemple, il existe trois composants d'ordre supérieur f, g et h, qui n'acceptent tous qu'un seul composant comme paramètre, nous pouvons donc facilement les imbriquer :

. Il peut y avoir une exception ici, c'est-à-dire que le composant d'ordre supérieur le plus interne h peut avoir plusieurs paramètres, mais les autres composants d'ordre supérieur ne doivent recevoir qu'un seul paramètre. Ce n'est qu'ainsi que la valeur de retour de la couche interne et le nombre de. les paramètres de fonction de la couche externe soient garantis cohérents (seulement 1 dans chaque cas). f( g( h(WrappedComponent) ) )

Par exemple, nous utilisons connect avec un autre composant d'ordre élevé

qui imprime les journaux : 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>

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

推荐阅读：

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

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

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!