Komponenten höherer Ordnung in React verstehen: Vor- und Nachteile sowie moderne Alternativen

Ich bin kürzlich auf eine Interviewfrage zu Higher-Order Components (HOCs) und ihrer Rolle bei der Verbesserung der Funktionalität einer Komponente gestoßen. Obwohl HOCs eine leistungsstarke und fortschrittliche Technik sind, ist es erwähnenswert, dass sie im modernen React nicht mehr so ​​häufig verwendet werden. Tatsächlich wurden in der neuesten React-Dokumentation detaillierte Erklärungen zu HOCs eingestellt.

In diesem Blogbeitrag werde ich untersuchen, was HOCs sind, welche Vorteile sie haben und warum sie nicht mehr der empfohlene Ansatz in der modernen React-Entwicklung sind.

Komponente höherer Ordnung (HOC)

[Eine] Komponente höherer Ordnung ist eine Funktion, die eine Komponente nimmt und eine neue Komponente zurückgibt.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Legacy-React-Dokumentation

Dieses Beispiel stammt aus der älteren React-Dokumentation. Ich habe das Beispiel aktualisiert, um eine funktionale Komponente zu verwenden, und die Erklärung zusammengefasst.

Eine CommentList-Komponente abonniert eine externe Datenquelle, um eine Liste von Kommentaren darzustellen:

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;

Eine BlogPost-Komponente abonniert einen einzelnen Blog-Beitrag:

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 würde in etwa so aussehen:

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

  export default DataSource;

CommentList und BlogPost sind nicht identisch, aber viele ihrer Implementierungen sind gleich. Um diese Wiederholung zu vereinfachen, können wir eine Funktion erstellen, die diese gemeinsamen Muster abstrahiert.

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

Wenn CommentListWithSubscription und BlogPostWithSubscription gerendert werden, übergeben sie eine Datenstütze mit den aktuellsten Informationen von DataSource an ihre jeweiligen Komponenten.

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

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

Eine Komponente höherer Ordnung (HOC) ist eine reine Funktion, die die ursprüngliche Komponente erweitert, indem sie sie in eine Containerkomponente einschließt, sodass wir die Logik ohne Nebenwirkungen über mehrere Komponenten hinweg teilen können.

„Komponenten höherer Ordnung werden im modernen React-Code nicht häufig verwendet“, heißt es in der Legacy-Dokumentation.

Nach der Untersuchung der Gründe haben die Entwickler auf mehrere Nachteile hingewiesen:

Komplexität: HOCs können tief verschachtelte Wrapper erstellen, wodurch Code schwieriger zu lesen und zu debuggen ist.

Prop-Kollisionen: HOCs manipulieren Requisiten, was zu unbeabsichtigten Konflikten und Problemen führen kann.

Haken als Alternative
Benutzerdefinierte Hooks bieten eine prägnantere und einfachere Möglichkeit, mit derselben Logik umzugehen, und ersetzen effektiv die Notwendigkeit von HOCs.

Einige Entwickler verwenden HOCs immer noch für Aufgaben wie Authentifizierung oder Fehlerbehandlung. Es ist wichtig, sowohl die Vor- als auch die Nachteile zu verstehen und über die neuesten Trends auf dem Laufenden zu bleiben, damit wir fundierte Diskussionen mit unseren Teammitgliedern führen können.

Das obige ist der detaillierte Inhalt vonKomponenten höherer Ordnung in React verstehen: Vor- und Nachteile sowie moderne Alternativen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!