面试题：React高阶组件：状态传递与复用逻辑

高阶组件实现数据获取逻辑复用：
- 首先，定义一个高阶组件。这个高阶组件接收目标组件作为参数，并返回一个新的组件。
- 在高阶组件内部，使用 useState 或 useReducer 来管理数据状态。由于数据源获取逻辑类似，可以封装一个通用的获取数据函数。
- 例如，假设数据源都是通过 fetch 获取 JSON 数据，代码如下：

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

const withDataFetching = (WrappedComponent) => {
    return (props) => {
        const [data, setData] = useState(null);
        const fetchData = async (url) => {
            try {
                const response = await fetch(url);
                const result = await response.json();
                setData(result);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };
        useEffect(() => {
            // 这里假设传递了一个url prop 作为数据源地址
            if (props.url) {
                fetchData(props.url);
            }
        }, [props.url]);

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

export default withDataFetching;

处理不同数据源的数据传递给目标组件：
- 在使用高阶组件时，通过传递不同的 url（或其他标识数据源的参数）给高阶组件包裹的目标组件。
- 例如：

import React from'react';
import withDataFetching from './withDataFetching';

const MyComponent = ({ data }) => {
    return (
        <div>
            {data && (
                <ul>
                    {Object.entries(data).map(([key, value]) => (
                        <li key={key}>{`${key}: ${value}`}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

const DataSource1Component = withDataFetching(MyComponent);
const DataSource2Component = withDataFetching(MyComponent);

const App = () => {
    return (
        <div>
            <DataSource1Component url="https://example.com/api/data1" />
            <DataSource2Component url="https://example.com/api/data2" />
        </div>
    );
};

export default App;

在上述代码中，withDataFetching 高阶组件接收 WrappedComponent 作为参数，返回的新组件根据传递的 url 去获取数据，并将获取到的数据通过 data prop 传递给 WrappedComponent。不同的数据源通过传递不同的 url 来区分，从而实现不同数据源的数据传递给目标组件。

面试题：React高阶组件：状态传递与复用逻辑

知识考点

面试题答案