面试题：React高阶组件：基本概念与应用场景

React高阶组件（HOC）定义

高阶组件（Higher - Order Component，HOC）是 React 中用于复用组件逻辑的一种高级技巧。它本身不是 React API 的一部分，而是一种基于 React 的组合特性形成的设计模式。简单来说，高阶组件是一个函数，它接受一个组件作为参数，并返回一个新的组件。这个新组件通常会增强传入的原始组件的功能。

常见应用场景

代码复用、逻辑抽离

比如多个组件都需要进行相同的权限验证逻辑。可以创建一个 HOC，在 HOC 中进行权限验证，然后将需要权限验证的组件作为参数传入该 HOC。
示例代码：

import React from'react';

const withAuth = (WrappedComponent) => {
  return (props) => {
    const hasPermission = true; // 实际应用中这里进行权限判断逻辑
    if (!hasPermission) {
      return <div>无权限访问</div>;
    }
    return <WrappedComponent {...props} />;
  };
};

const Profile = () => {
  return <div>用户个人资料页面</div>;
};

const ProtectedProfile = withAuth(Profile);

export default function App() {
  return (
    <div>
      <ProtectedProfile />
    </div>
  );
}

数据获取

许多组件可能需要从 API 获取数据，使用 HOC 可以将数据获取逻辑封装起来。比如多个组件都需要获取文章列表数据。
示例代码：

import React from'react';

const withDataFetching = (WrappedComponent, url) => {
  return (props) => {
    const [data, setData] = React.useState(null);
    React.useEffect(() => {
      const fetchData = async () => {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      };
      fetchData();
    }, []);

    return <WrappedComponent data={data} {...props} />;
  };
};

const ArticleList = ({ data }) => {
  return (
    <div>
      {data && data.map((article) => <div key={article.id}>{article.title}</div>)}
    </div>
  );
};

const Articles = withDataFetching(ArticleList, 'https://example.com/api/articles');

export default function App() {
  return (
    <div>
      <Articles />
    </div>
  );
}

面试题：React高阶组件：基本概念与应用场景

知识考点

面试题答案

React高阶组件（HOC）定义

常见应用场景