Comprendre les composants d'ordre supérieur dans React : avantages, inconvénients et alternatives modernes

Je suis récemment tombé sur une question d'entretien sur les composants d'ordre supérieur (HOC) et leur rôle dans l'amélioration des fonctionnalités d'un composant. Bien que les HOC soient une technique puissante et avancée, il convient de noter qu'ils ne sont plus aussi couramment utilisés dans React moderne. En fait, la dernière documentation React a progressivement supprimé les explications détaillées des HOC.

Dans cet article de blog, j'explorerai ce que sont les HOC, leurs avantages et pourquoi ils ne constituent plus l'approche recommandée dans le développement React contemporain.

Composant d'ordre supérieur (HOC)

[Un] composant d'ordre supérieur est une fonction qui prend un composant et renvoie un nouveau composant.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Documentation React héritée

Cet exemple provient de l'ancienne documentation React. J'ai mis à jour l'exemple pour utiliser un composant fonctionnel et résumé l'explication.

Un composant CommentList s'abonne à une source de données externe pour afficher une liste de commentaires :

import React, { useEffect, useState } from "react";

function CommentList() {
    // "DataSource" is some global data source
    const [comments, setComments] = useState(DataSource.getComments());

    useEffect(() => {
        function handleChange() {
            setComments(DataSource.getcomments());
        }

        DataSource.addChangeListener(handleChange);

        return () => {
            DataSource.removeChangeListener(handleChange);
        };
    }, []);

    return (
        <div>
            {comments.map((comment) => (
                <Comment comment={comment} key={comment.id} />
            ))}
        </div>
    );
}

export default CommentList;

Un composant BlogPost s'abonne à un seul article de blog :

import React, { useEffect, useState } from "react";


function BlogPost(props) {
    const [blogPost, setBlogPost] = useState(DataSource.getBlogPost(props.id));

    useEffect(() => {
        function handleChange() {
            setBlogPost(DataSource.getBlogPost(props.id))
        }

        DataSource.addChangeListener(handleChange)

        return () => {
            DataSource.removeChangeListener(handleChange)
        }
    }, [props.id]);

    return <TextBlock text={blogPost} />

}

export default BlogPost;

DataSource ressemblerait à ceci :

const DataSource = {
    getComments: () => {
      return [...];
    },
    addChangeListener: (callback) => {},
    removeChangeListener: (callback) => {}
  };

  export default DataSource;

CommentList et BlogPost ne sont pas identiques, mais une grande partie de leur implémentation est la même. Pour simplifier cette répétition, nous pouvons créer une fonction qui résume ces modèles partagés.

// Custom Hook
export function useSubscription(selectData, props) {
    const [data, setData] = useState(selectData(DataSource, props));

    useEffect(() => {
        function handleChange() {
            setData(selectData(DataSource, props))
        }

        DataSource.addChangeListener(handleChange)

        return () => {
            DataSource.removeChangeListener(handleChange)
        }
    }, [props])

    return data
}


function withSubscription(WrappedComponent, selectData) {
    return function(props) {
        const data = useSubsctiption(selectData, props)
        return <WrappedComponent data={data} {...props} />
    }
}

Lorsque CommentListWithSubscription et BlogPostWithSubscription sont rendus, ils transmettent un accessoire de données contenant les informations les plus récentes de DataSource à leurs composants respectifs.

const CommentListWithSubscription = withSubscription(
    CommentList,
    (DataSource) => DataSource.getComments()
)

const BlogPostWithSubscription = withSubscription(
    BlogPost,
    (DataSource, props) => DataSource.getBlogPost(props.id)
)

Un composant d'ordre supérieur (HOC) est une fonction pure qui améliore le composant d'origine en l'enveloppant dans un composant conteneur, nous permettant de partager la logique entre plusieurs composants sans effets secondaires.

"Les composants d'ordre supérieur ne sont pas couramment utilisés dans le code React moderne", a noté la documentation existante.

Après avoir recherché les raisons, les développeurs ont souligné plusieurs inconvénients :

Complexité : les HOC peuvent créer des wrappers profondément imbriqués, rendant le code plus difficile à lire et à déboguer.

Collisions d'accessoires  : les HOC manipulent les accessoires, ce qui peut entraîner des conflits et des problèmes involontaires.

Les crochets comme alternative
Les hooks personnalisés offrent un moyen plus concis et plus simple de gérer la même logique, remplaçant efficacement le besoin de HOC.

Certains développeurs utilisent encore les HOC pour des tâches telles que l'authentification ou la gestion des erreurs. Il est important de comprendre les avantages et les inconvénients et de rester au courant des dernières tendances, ce qui nous permet d'engager des discussions éclairées avec les membres de notre équipe.

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!