首頁 > web前端 > js教程 > 主體

了解 React 中的高階元件:優點、缺點和現代替代方案

WBOY
發布: 2024-08-30 19:01:02
原創
838 人瀏覽過

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

我最近遇到了一個關於高階組件(HOC)及其在增強組件功能中的作用的面試問題。雖然 HOC 是一種強大且先進的技術,但值得注意的是,它們在現代 React 中不再常用。事實上,最新的 React 文件已經逐步取消了 HOC 的詳細解釋。

在這篇文章中,我將探討 HOC 是什麼、它們的優點,以及為什麼它們不再是當代 React 開發中的推薦方法。

高階組件 (HOC)

[A] 高階元件是一個接受一個元件並傳回一個新元件的函數。

const EnhancedComponent = higherOrderComponent(WrappedComponent);
登入後複製

舊版 React 文件

這個範例是來自舊的 React 文件。我已經更新了範例以使用功能組件並總結了說明。

CommentList 元件訂閱外部資料來源以呈現評論清單:

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;
登入後複製

BlogPost 元件訂閱單一部落格文章:

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;
登入後複製

資料來源看起來像這樣:

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

  export default DataSource;
登入後複製

CommentList 和 BlogPost 並不相同,但它們的大部分實作是相同的。為了簡化這種重複,我們可以建立一個函數來抽象化這些共享模式。

// 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} />
    }
}
登入後複製

當 CommentListWithSubscription 和 BlogPostWithSubscription 被渲染時,它們會將包含最新資訊的 data prop 從 DataSource 傳遞到各自的元件。

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

const BlogPostWithSubscription = withSubscription(
    BlogPost,
    (DataSource, props) => DataSource.getBlogPost(props.id)
)
登入後複製

高階組件(HOC)是一個純函數,它透過將原始組件包裝在容器組件中來增強原始組件,使我們能夠在多個組件之間共享邏輯而不會產生副作用。

「高階元件在現代 React 程式碼中並不常用,」遺留文件指出。

經過研究原因,開發者指出了幾個缺點:

複雜性:HOC 可以建立深度嵌套的包裝器,使程式碼更難以閱讀和除錯。

道具碰撞:HOC 操縱道具,這可能會導致意外的衝突和問題。

鉤子作為替代品
自訂鉤子提供了一種更簡潔、更直接的方法來處理相同的邏輯,有效地取代了對 HOC 的需求。

有些開發人員仍然使用 HOC 來執行身份驗證或錯誤處理等任務。了解優點和缺點並隨時了解最新趨勢非常重要,這使我們能夠與團隊成員進行明智的討論。

以上是了解 React 中的高階元件:優點、缺點和現代替代方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板