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