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