面试题：React高阶组件中State的作用及与Props的交互

State在React高阶组件中的角色
- 数据存储与管理：State用于存储高阶组件内部需要管理的动态数据。例如，在一个用于权限控制的高阶组件中，可能会用State存储用户的权限信息，这些信息会随着用户登录、角色变更等操作而改变。
- 驱动组件更新：当高阶组件的State发生变化时，会触发组件的重新渲染，进而影响被包裹组件。比如在一个用于加载数据的高阶组件中，State中存储加载状态（loading），loading状态的改变会使被包裹组件呈现不同的UI（加载中、加载完成、加载失败等）。
高阶组件的State与传递给被包裹组件Props的交互
- 传递动态数据：高阶组件可以将State中的数据作为Props传递给被包裹组件。例如，一个用于分页的高阶组件，其State中存储当前页码，将这个页码作为Props传递给被包裹的列表组件，列表组件就能根据这个页码展示相应页的数据。
- 基于State控制Props：高阶组件根据State的不同值，传递不同的Props给被包裹组件。比如在一个权限控制高阶组件中，根据State中存储的用户权限信息，决定是否给被包裹组件传递“删除”按钮的Props，如果权限不足则不传递该Props，使得被包裹组件不会渲染“删除”按钮。
复杂场景下（数据的动态加载与更新）State和Props协同工作示例
- 代码示例

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

// 高阶组件
const withDataFetching = (WrappedComponent, apiUrl) => {
    return (props) => {
        const [data, setData] = useState(null);
        const [loading, setLoading] = useState(false);
        const [error, setError] = useState(null);

        useEffect(() => {
            const fetchData = async () => {
                setLoading(true);
                try {
                    const response = await fetch(apiUrl);
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    const result = await response.json();
                    setData(result);
                } catch (error) {
                    setError(error.message);
                } finally {
                    setLoading(false);
                }
            };
            fetchData();
        }, [apiUrl]);

        return (
            <WrappedComponent
                data={data}
                loading={loading}
                error={error}
                {...props}
            />
        );
    };
};

// 被包裹组件
const MyComponent = ({ data, loading, error }) => {
    if (loading) {
        return <div>Loading...</div>;
    }
    if (error) {
        return <div>Error: {error}</div>;
    }
    return (
        <div>
            <h1>Data List</h1>
            <ul>
                {data && data.map((item) => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
};

// 使用高阶组件
const EnhancedComponent = withDataFetching(MyComponent, 'https://example.com/api/data');

const App = () => {
    return (
        <div>
            <EnhancedComponent />
        </div>
    );
};

export default App;

协同工作解释：
- State管理数据加载状态：高阶组件withDataFetching的State中，loading表示数据加载状态，error存储可能出现的错误，data存储从API获取的数据。
- Props传递数据和状态：高阶组件将data、loading、error作为Props传递给被包裹组件MyComponent。MyComponent根据这些Props进行不同的渲染。当loading为true时，显示加载提示；当error存在时，显示错误信息；当数据加载成功，data有值时，展示数据列表。这样在数据动态加载与更新的复杂场景下，高阶组件的State和传递给被包裹组件的Props协同工作，实现了完整的数据展示逻辑。

星途面试题库

面试题：React高阶组件中State的作用及与Props的交互

知识考点

面试题答案