面试题：React中高阶组件与Hooks结合使用场景

常见场景

权限控制：
- 使用高阶组件进行路由级别的权限校验，例如withAuth高阶组件可以检查用户是否登录，未登录则重定向到登录页。在组件内部可以使用useContext Hook获取用户登录状态上下文，进一步在组件渲染逻辑中根据权限动态显示或隐藏某些元素。
- 示例代码：

import React, { useContext } from'react';
import { AuthContext } from './AuthContext';

const withAuth = (WrappedComponent) => {
    return (props) => {
        const { isLoggedIn } = useContext(AuthContext);
        if (!isLoggedIn) {
            // 重定向到登录页
            return <div>请先登录</div>;
        }
        return <WrappedComponent {...props} />;
    };
};

export default withAuth;

数据获取与状态管理：
- 高阶组件withData可以负责从API获取数据，而组件内部通过useState和useEffect Hook来处理数据的加载状态和更新。例如在一个文章详情组件中，withData高阶组件根据文章ID获取文章数据，组件内部使用useState来存储文章内容，useEffect在数据获取后更新状态。
- 示例代码：

import React, { useState, useEffect } from'react';

const withData = (WrappedComponent) => {
    return (props) => {
        const [data, setData] = useState(null);
        useEffect(() => {
            // 模拟API请求
            fetch(`/api/article/${props.id}`)
              .then(response => response.json())
              .then(result => setData(result));
        }, [props.id]);
        return <WrappedComponent data={data} {...props} />;
    };
};

export default withData;

优势

代码复用与逻辑分离：高阶组件可以将通用逻辑（如权限控制、数据获取）抽象出来，实现跨组件复用。而Hooks在组件内部管理状态和副作用，使组件自身逻辑更加清晰。两者结合，既实现了逻辑的复用，又保证了组件内部代码的简洁与可维护性。
增强组件灵活性：Hooks提供了更细粒度的状态和副作用控制，与高阶组件结合时，能够在不改变高阶组件逻辑的情况下，让组件根据自身需求灵活使用这些逻辑。例如在权限控制场景中，组件可以通过useContext灵活决定如何基于权限进行渲染，而高阶组件只负责核心的权限校验逻辑。
易于测试：高阶组件可以单独测试其复用逻辑，Hooks使得组件内部逻辑可以通过模拟状态和副作用进行单元测试。这种分离式的测试方式降低了测试的复杂度，提高了代码的可测试性。

星途面试题库

面试题：React中高阶组件与Hooks结合使用场景

知识考点

面试题答案

常见场景

优势