如何按参数缓存第三方React Hook结果，避免重复执行？

由于React禁止条件式调用Hook，我们可以通过条件式渲染专门的Hook调用组件，结合模块级缓存来实现按type复用useDescription的结果，避免重复执行异步操作。以下是具体实现方案：

方案1：拆分组件+模块级缓存 #

1. 定义全局缓存 #

创建模块级的缓存容器，用于跨组件共享已加载的type对应结果：

// 模块级缓存，存储已加载的description数据
const descriptionCache = new Map();

2. 封装Hook调用组件 #

用React.memo包裹专门调用useDescription的组件，确保仅当type变化时才重新渲染：

const DescriptionLoader = React.memo(({ type, onLoaded }) => {
  // 仅当组件渲染时才调用第三方Hook
  const { description, isLoading } = useDescription(type);

  React.useEffect(() => {
    if (!isLoading) {
      // 加载完成后存入缓存，并通知父组件
      descriptionCache.set(type, description);
      onLoaded(description);
    }
  }, [type, isLoading, description, onLoaded]);

  return null; // 该组件仅负责加载数据，无需渲染UI
});

3. 修改原组件逻辑 #

在原Description组件中，先检查缓存，仅当缓存不存在时才渲染DescriptionLoader：

const Description = ({ type, id }) => {
  // 初始化状态：优先使用缓存数据
  const [description, setDescription] = React.useState(() => descriptionCache.get(type));
  const [isLoading, setIsLoading] = React.useState(!descriptionCache.has(type));

  // 当type变化时，重新检查缓存
  React.useEffect(() => {
    const cachedDesc = descriptionCache.get(type);
    if (cachedDesc) {
      setDescription(cachedDesc);
      setIsLoading(false);
    } else {
      setIsLoading(true);
    }
  }, [type]);

  // 处理加载完成的回调
  const handleLoaded = React.useCallback((desc) => {
    setDescription(desc);
    setIsLoading(false);
  }, []);

  if (isLoading) {
    return (
      <>
        <div>Loading {type} {id}...</div>
        {/* 仅在需要加载时渲染Hook调用组件 */}
        <DescriptionLoader type={type} onLoaded={handleLoaded} />
      </>
    );
  }

  const { data } = useData(id, description);

  return (
    <div>{type} {id}: {description}, {data}</div>
  );
};

方案2：封装为自定义Hook（更简洁） #

把缓存逻辑封装成自定义Hook，让业务组件代码更干净：

const descriptionCache = new Map();

function useCachedDescription(type) {
  const [state, setState] = React.useState(() => {
    const cached = descriptionCache.get(type);
    return {
      description: cached,
      isLoading: !cached
    };
  });

  React.useEffect(() => {
    const cached = descriptionCache.get(type);
    if (cached) {
      setState({ description: cached, isLoading: false });
    } else {
      setState(prev => ({ ...prev, isLoading: true }));
    }
  }, [type]);

  // 封装内部的Loader组件
  const Loader = React.useMemo(() => {
    return React.memo(({ onLoaded }) => {
      const { description, isLoading } = useDescription(type);
      React.useEffect(() => {
        if (!isLoading) {
          descriptionCache.set(type, description);
          onLoaded(description);
        }
      }, [type, isLoading, description, onLoaded]);
      return null;
    });
  }, [type]);

  const handleLoaded = React.useCallback((desc) => {
    setState({ description: desc, isLoading: false });
  }, []);

  return {
    ...state,
    // 仅在加载中时返回Loader组件
    loader: state.isLoading ? <Loader onLoaded={handleLoaded} /> : null
  };
}

使用自定义Hook #

const Description = ({ type, id }) => {
  const { description, isLoading, loader } = useCachedDescription(type);

  if (isLoading) {
    return (
      <>
        <div>Loading {type} {id}...</div>
        {loader}
      </>
    );
  }

  const { data } = useData(id, description);

  return (
    <div>{type} {id}: {description}, {data}</div>
  );
};

方案合规性说明 #

• 完全遵守React Hook规则：所有Hook都在组件/自定义Hook的顶层调用，无任何条件式调用行为
• 通过条件式渲染DescriptionLoader组件控制第三方Hook的执行时机，仅当需要加载新数据时才触发Hook调用
• 模块级缓存是纯函数式的状态管理，不会干扰React渲染流程，且跨组件共享缓存完全符合需求

内容的提问来源于stack exchange，提问作者knittl