面试题：实现带Hooks的高阶组件

Question

请编写一个高阶组件，该高阶组件接收一个组件作为参数，并为这个传入的组件添加一些基于Hooks实现的逻辑，比如数据的缓存功能。要求说明设计思路，以及如何保证数据的一致性和避免重复渲染。

Answer 1

设计思路

1. 高阶组件定义：高阶组件（HOC）是一个函数，接收一个组件作为参数，并返回一个新的组件。
2. 数据缓存逻辑：使用 useState 来存储数据，useEffect 来触发数据获取逻辑，并使用一个对象来缓存数据。
3. 数据一致性：通过比较传入的依赖来确保在依赖不变时不重复获取数据。
4. 避免重复渲染：使用 React.memo 包裹返回的组件，并且在 useEffect 中正确设置依赖数组。

代码实现

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

const withDataCache = (WrappedComponent) => {
  const cache = {};
  return memo((props) => {
    const { dataKey, dataFetchFunction } = props;
    const [data, setData] = useState(null);

    useEffect(() => {
      if (cache[dataKey]) {
        setData(cache[dataKey]);
      } else {
        const fetchData = async () => {
          const result = await dataFetchFunction();
          cache[dataKey] = result;
          setData(result);
        };
        fetchData();
      }
    }, [dataKey, dataFetchFunction]);

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

export default withDataCache;

使用示例

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

const MyComponent = ({ data }) => {
  return (
    <div>
      {data && <p>{JSON.stringify(data)}</p>}
    </div>
  );
};

const fetchData = async () => {
  // 模拟异步数据获取
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ message: 'Cached Data' });
    }, 1000);
  });
};

const CachedComponent = withDataCache(MyComponent);

const App = () => {
  return (
    <div>
      <CachedComponent dataKey="uniqueKey" dataFetchFunction={fetchData} />
    </div>
  );
};

export default App;

解释

1. 高阶组件 withDataCache：接收 WrappedComponent 作为参数，返回一个新的 memo 组件。
2. 缓存对象 cache：用于存储已获取的数据。
3. useState：存储当前数据状态。
4. useEffect：在组件挂载和 dataKey 或 dataFetchFunction 变化时触发。如果缓存中有数据，则直接设置数据；否则，异步获取数据并更新缓存和状态。
5. React.memo：包裹返回的组件，避免在 props 未改变时重复渲染。
6. 使用示例：定义 MyComponent 接收缓存数据，fetchData 模拟异步数据获取，CachedComponent 使用高阶组件添加缓存逻辑，App 组件中使用 CachedComponent。