我最近遇到了一个关于高阶组件（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中文网其他相关文章！
