面试题：React高阶组件动态参数传递与组件更新机制

动态参数传递与组件更新机制阐述：
- 高阶组件 withDynamicData 接收一个异步获取数据的函数作为参数。在高阶组件内部，需要通过 useState 和 useEffect 钩子来实现数据的获取和更新。
- useState 用于存储获取到的数据，useEffect 用于在组件挂载或依赖项变化时触发异步数据获取函数。当异步函数返回新的数据时，通过 setState 更新状态，这会触发被包裹组件的重新渲染，因为状态变化会导致父组件重新渲染，进而使被包裹组件重新渲染。
关键代码逻辑（以 React 为例）：

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

const withDynamicData = (asyncDataFunction) => {
    return (WrappedComponent) => {
        return (props) => {
            const [data, setData] = useState(null);

            useEffect(() => {
                const fetchData = async () => {
                    const result = await asyncDataFunction();
                    setData(result);
                };
                fetchData();
            }, []);

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

// 示例异步数据获取函数
const fetchSomeData = async () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ message: '异步获取的数据' });
        }, 1000);
    });
};

// 使用高阶组件包裹的组件
const MyComponent = ({ data }) => {
    return (
        <div>
            {data? <p>{JSON.stringify(data)}</p> : <p>加载中...</p>}
        </div>
    );
};

const EnhancedComponent = withDynamicData(fetchSomeData)(MyComponent);

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

在上述代码中：

withDynamicData 高阶组件接收 asyncDataFunction 并返回一个新的函数，这个新函数接收 WrappedComponent。
内部返回的函数使用 useState 来管理数据状态 data，使用 useEffect 在组件挂载时调用 asyncDataFunction 异步获取数据，并更新 data。
最后将 data 作为属性传递给 WrappedComponent，当 data 变化时，WrappedComponent 会重新渲染。

星途面试题库

面试题：React高阶组件动态参数传递与组件更新机制

知识考点

面试题答案