React自定义Hook跨组件共享状态、避免重复API请求的实现方法

当前示例中不同组件调用useCounter时状态天然隔离的根源：

• Hook内部通过useState创建的状态，是和每一个调用它的组件实例绑定的。App组件调用Hook时生成一份独立的count状态，AnotherComponent调用时会初始化一份全新的独立count，两者没有关联，因此无法获取一致的值。

针对你不想使用Context、需要缓存大体积API返回值、避免重复请求、减少不必要重渲染的需求，可通过以下方案实现共享状态：

模块级单例 + 订阅发布机制（零依赖，最适配性能需求） #

• 将状态提升到模块作用域，作为所有组件共享的单例变量，不再绑定单个组件实例的生命周期。
• 为单例状态补充轻量订阅机制：组件调用Hook时将自身的状态更新函数注册为订阅者，单例状态变更时，仅通知订阅了该状态的组件触发重渲染，未订阅的组件完全不受影响。
• 适配你的API缓存场景：首次调用Hook时发起请求拉取数据并存入单例，后续其他组件调用Hook时直接读取已缓存的结果，不会重复发起网络请求。相比Context方案，这种模式不会出现状态变更时，所有消费相关Context的组件（哪怕没有用到对应数据）全部重渲染的问题，尤其适合存储大体积列表数据。

适配counter示例的简化实现：

// 模块级单例，脱离组件存在
let sharedCount = 0;
// 存储所有订阅了count更新的组件更新函数
const subscribers = new Set();

function useCounter(initialCount = 0) {
  // 组件首次挂载时从单例读取初始值
  const [count, setCount] = useState(sharedCount ?? initialCount);

  useEffect(() => {
    // 组件挂载时注册为订阅者
    subscribers.add(setCount);
    // 组件卸载时移除订阅，避免内存泄漏
    return () => subscribers.delete(setCount);
  }, []);

  // 统一的状态更新方法
  const updateCount = (action) => {
    sharedCount = typeof action === 'function' ? action(sharedCount) : action;
    // 通知所有订阅者同步最新值
    subscribers.forEach(sub => sub(sharedCount));
  }

  return [count, updateCount];
}

修改完成后，App和AnotherComponent调用useCounter时会共享同一份count状态，任意组件触发更新时，仅两个订阅了状态的组件会同步值，无其他重渲染开销。

轻量状态管理方案 #

如果不想手动实现订阅逻辑，可选用支持细粒度订阅的轻量状态管理方案：

• 这类方案的核心能力就是支持按数据维度拆分订阅，只有依赖了某块数据的组件，才会在该块数据变更时触发重渲染，完全规避大列表数据更新引发的全局无关重渲染问题。
• 直接将API请求结果存入对应store，首次调用Hook发请求，后续读取缓存值，即可实现避免重复请求的目标。

关于Context的性能误区 #

你担心的Context引发不必要重渲染的问题，本质是常见用法中，Provider值变更时，所有消费该Context的组件都会触发重渲染，哪怕组件实际没有用到值里的全部数据。如果只是要做单块的API数据缓存，用前面提到的模块级单例+订阅的方案，比Context方案的性能开销更低，也没有额外的组件层级嵌套成本。

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