让我们一起聊聊封装一个管理 Url 状态的 Hook

本文来讲下 ahooks 中的 useUrlState。,通过 url query 来管理 state 的 Hook。,在之前的架构篇中我们就提到，ahooks 这个项目是一个 monoRepo。它的项目管理是通过 lerna[1] 进行管理的。可以从官网以及源码中看到 useUrlState 是独立一个仓库进行管理的。,也就是你必须单独安装：,我认为官方这么做的理由是 useUrlState 基于 react-router 的 useLocation & useHistory & useNavigate 进行 query 管理。所以你必须要安装 react-router 的 5.x 或者 6.x 版本。但其实很多 React 项目都不一定使用 react-router。假如将这个 hook 内置到 ahooks 中的话，可能会导致包体积变大。,另外，该 hook 是依赖于 query-string 这个 npm 包的。使用这个包，我认为理由有以下几点：,通过示例简单介绍下，这两个方法：,qs.parse(string, [options]),qs.stringify(object, [options]),直接看代码，显示初始值部分。,接下来看 url 的状态设置：,假如是 5.x 版本，调用 useHistory 方法，更新对应的状态。,假如是 6.x 版本，调用 useNavigate 方法，更新对应的状态。,工具库中假如某个工具函数/hook 依赖于一个开发者可能并不会使用的包，而且这个包的体积还比较大的时候，可以将这个工具函数/hook 独立成一个 npm 包，开发者使用的时候才进行安装。另外这种可以考虑使用 monoRepo 的包管理方法，方便进行文档管理以及一些公共包管理等。