了解 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中文网其他相关文章！