React Hooks 不使用Context/Redux实现全局状态的可行性及实践咨询

这种不依赖Context API、Redux等状态管理方案，仅通过自定义Hook实现轻量化全局状态的思路完全可行，是React开发中非常常用的轻量状态落地实践。很多热门轻量状态库的底层核心逻辑，本质就是对这个思路的工程化封装。

你贴出的演示代码是无法正常运行的，核心问题违反了React Hook的调用规则：Hook只能在React组件或自定义Hook的顶层作用域调用，你将useState写在IIFE的立即执行逻辑中，属于普通JS函数的执行上下文，不在React的渲染流程内，运行时会直接抛出调用规则错误。

要实现你提出的三个核心目标，只需要把全局状态存在模块的顶层作用域，搭配发布订阅模式通知所有调用该Hook的组件更新即可，参考实现如下：

// 全局状态存储在模块作用域，天然多组件共享
let globalUserPosts = {}
// 订阅队列：存储所有调用该Hook的组件的更新触发函数
const subscribers = new Set()

// 自定义Hook
const useUserPosts = (userId) => {
  // 借用useState的更新函数触发当前组件重渲染
  const [, forceRender] = useState({})

  useEffect(() => {
    // 组件挂载时加入订阅队列
    const update = () => forceRender({})
    subscribers.add(update)
    // 组件卸载时移除订阅，避免内存泄漏
    return () => subscribers.delete(update)
  }, [])

  // 全局更新方法
  const updateUserPosts = (newPostList) => {
    globalUserPosts = {
      ...globalUserPosts,
      [userId]: newPostList
    }
    // 通知所有订阅组件同步更新
    subscribers.forEach(updateFn => updateFn())
  }

  return [globalUserPosts[userId] ?? [], updateUserPosts]
}

你后续封装useFetchUserPosts的逻辑可以直接复用这个Hook，不需要调整。

完全覆盖你提出的三个核心目标：

• 天然具备缓存能力：全局状态只会在模块加载时初始化一次，不会随组件卸载销毁
• 多路由/多组件数据自动同步：所有调用该Hook的组件拿到的是同一份数据，更新后全量同步，不需要重复发请求
• 操作同步：删除帖子时只要调用updateUserPosts过滤掉对应数据，所有挂载的组件都会同步更新内容

如果后续业务复杂度提升，可以按需补充优化逻辑：

• 订阅时关联userId，更新时只通知订阅了对应userId的组件，减少不必要的重渲染
• 增加缓存过期、LRU淘汰逻辑，避免内存占用过高
• 可补充持久化逻辑，将全局状态存储到localStorage/sessionStorage，页面刷新后缓存依然有效

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