Memahami Komponen Pesanan Tinggi dalam React: Kebaikan, Keburukan dan Alternatif Moden

Baru-baru ini saya terjumpa soalan temu bual tentang Komponen Pesanan Tinggi (HOC) dan peranannya dalam mempertingkatkan kefungsian komponen. Walaupun HOC adalah teknik yang berkuasa dan maju, perlu diingat bahawa ia tidak lagi digunakan seperti biasa dalam React moden. Malah, dokumentasi React terkini telah menghentikan penjelasan terperinci tentang HOC.

Dalam catatan blog ini, saya akan meneroka apa itu HOC, kelebihannya dan sebab ia bukan lagi pendekatan yang disyorkan dalam pembangunan React kontemporari.

Komponen Pesanan Tinggi (HOC)

Komponen peringkat tinggi [A] ialah fungsi yang mengambil komponen dan mengembalikan komponen baharu.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Dokumentasi React Legasi

Contoh ini datang daripada dokumentasi React yang lebih lama. Saya telah mengemas kini contoh untuk menggunakan komponen berfungsi dan meringkaskan penjelasannya.

Komponen Senarai Komen melanggan sumber data luaran untuk memberikan senarai ulasan:

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;

Komponen BlogPost melanggan satu catatan 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 akan kelihatan seperti ini:

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

  export default DataSource;

CommentList dan BlogPost tidak sama, tetapi kebanyakan pelaksanaannya adalah sama. Untuk memudahkan pengulangan ini, kita boleh mencipta fungsi yang mengabstrakkan corak kongsi ini.

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

Apabila CommentListWithSubscription dan BlogPostWithSubscription dipaparkan, mereka akan menghantar prop data yang mengandungi maklumat terkini daripada DataSource kepada komponen masing-masing.

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

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

Komponen Pesanan Tinggi (HOC) ialah fungsi tulen yang meningkatkan komponen asal dengan membungkusnya dalam komponen bekas, membolehkan kami berkongsi logik merentas berbilang komponen tanpa kesan sampingan.

"Komponen tertib lebih tinggi tidak biasa digunakan dalam kod React moden," kata dokumentasi warisan.

Selepas meneliti sebabnya, pembangun telah menunjukkan beberapa kelemahan:

Kerumitan: HOC boleh mencipta pembalut bersarang dalam, menjadikan kod lebih sukar dibaca dan nyahpepijat.

Perlanggaran Prop: HOC memanipulasi prop, yang boleh membawa kepada konflik dan isu yang tidak diingini.

Cangkuk sebagai Alternatif
Cangkuk tersuai menawarkan cara yang lebih ringkas dan mudah untuk mengendalikan logik yang sama, dengan berkesan menggantikan keperluan untuk HOC.

Sesetengah pembangun masih menggunakan HOC untuk tugas seperti pengesahan atau pengendalian ralat. Adalah penting untuk memahami kebaikan dan keburukan serta sentiasa dikemas kini tentang aliran terkini, membolehkan kami terlibat dalam perbincangan termaklum dengan ahli pasukan kami.

Atas ialah kandungan terperinci Memahami Komponen Pesanan Tinggi dalam React: Kebaikan, Keburukan dan Alternatif Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!