Heim > Web-Frontend > js-Tutorial > Komponenten höherer Ordnung in React verstehen: Vor- und Nachteile sowie moderne Alternativen

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

WBOY
Freigeben: 2024-08-30 19:01:02
Original
846 Leute haben es durchsucht

Understanding Higher-Order Components in React: Pros, Cons, and Modern Alternatives

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);
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren

DataSource würde in etwa so aussehen:

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

  export default DataSource;
Nach dem Login kopieren

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} />
    }
}
Nach dem Login kopieren

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)
)
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage