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

我最近遇到了一個關於高階組件（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中文網其他相關文章！