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

开发 开发工具
工具库中假如某个工具函数/hook 依赖于一个开发者可能并不会使用的包,而且这个包的体积还比较大的时候,可以将这个工具函数/hook 独立成一个 npm 包,开发者使用的时候才进行安装。

本文来讲下 ahooks 中的 useUrlState。

通过 url query 来管理 state 的 Hook。

useUrlState 的特殊

在之前的架构篇中我们就提到,ahooks 这个项目是一个 monoRepo。它的项目管理是通过 lerna[1] 进行管理的。可以从官网以及源码中看到 useUrlState 是独立一个仓库进行管理的。

也就是你必须单独安装:

npm i @ahooksjs/use-url-state -S

我认为官方这么做的理由是 useUrlState 基于 react-router 的 useLocation & useHistory & useNavigate 进行 query 管理。所以你必须要安装 react-router 的 5.x 或者 6.x 版本。但其实很多 React 项目都不一定使用 react-router。假如将这个 hook 内置到 ahooks 中的话,可能会导致包体积变大。

图片

另外,该 hook 是依赖于 query-string 这个 npm 包的。使用这个包,我认为理由有以下几点:

  • 一来是其功能强大,支持很多的 options 选项,满足我们各类业务需求。
  • 二来它业内也比较成熟,避免重复造轮子。
  • 三来它的包体积也很小,没什么负担。我们主要用到它的 parse 和 stringify 方法,压缩后只有 2.4 k。

图片

通过示例简单介绍下,这两个方法:

qs.parse(string, [options])

qs.parse('?name=jim')  // {name: 'jim'}
qs.parse('#token=123') // {token: '123'}
qs.parse('name=jim&name=lily&age=22') // {name: ['jim', 'lily'], age: 22}
qs.parse('foo[]=1&foo[]=2&foo[]=3', {arrayFormat: 'bracket'});
//=> {foo: ['1', '2', '3']}

qs.stringify(object, [options])

qs.stringify({name: 'jim', age: 22});  // 'age=22&name=jim'
qs.stringify({name: ['jim', 'lily'], age: 22}); // 'age=22&name=jim&name=lily'
qs.stringify({foo: [1, 2, 3]}, {arrayFormat: 'bracket'});
//=> 'foo[]=1&foo[]=2&foo[]=3'

useUrlState 源码解析

直接看代码,显示初始值部分。

  • 第一个参数为初始状态,第二个参数为 url 的配置,包括状态变更时切换 history 的方式、query-string parse 和  stringify 的配置。
  • 通过 react-router 的 useLocation 获取到 URL 的 location 对象。
  • react-router 兼容 5.x 和 6.x,其中 5.x 使用 useHistory,6.x 使用 useNavigate。
  • queryFromUrl 是调用 query-string 的 parse 方法,将 location 对象的 search 处理成对象值。
  • targetQuery 就是处理之后的最终值-将 queryFromUrl 和初始值进行 merge 之后的结果。
// ...
import * as tmp from 'react-router';
// ...
const useUrlState = <S extends UrlState = UrlState>(
// 初始状态
initialState?: S | (() => S),
// url 配置
options?: Options,
) => {
type State = Partial<{ [key in keyof S]: any }>;
const {
// 状态变更时切换 history 的方式
navigateMode = 'push',
// query-string parse 的配置
parseOptions,
// query-string stringify 的配置
stringifyOptions,
} = options || {};

const mergedParseOptions = { ...baseParseConfig, ...parseOptions };
const mergedStringifyOptions = { ...baseStringifyConfig, ...stringifyOptions };

// useLocation钩子返回表示当前URL的location对象。您可以将它想象成一个useState,它在URL更改时返回一个新值。
const location = rc.useLocation();

// https://v5.reactrouter.com/web/api/Hooks/usehistory
// useHistory 钩子可以访问用来导航的历史实例。
// react-router v5
const history = rc.useHistory?.();
// react-router v6
const navigate = rc.useNavigate?.();

const update = useUpdate();

const initialStateRef = useRef(
typeof initialState === 'function' ? (initialState as () => S)() : initialState || {},
);

// 根据 url query
const queryFromUrl = useMemo(() => {
return parse(location.search, mergedParseOptions);
}, [location.search]);

const targetQuery: State = useMemo(
() => ({
...initialStateRef.current,
...queryFromUrl,
}),
[queryFromUrl],
);
// 省略部分代码
}

接下来看 url 的状态设置:

  • 首先是根据传入的 s 值,获取到新的状态 newQuery,支持 function 方式。
  • 根据不同的 react-router 的版本调用不同的方法进行更新。

假如是 5.x 版本,调用 useHistory 方法,更新对应的状态。

假如是 6.x 版本,调用 useNavigate 方法,更新对应的状态。

  • 通过 update() -useUpdate() 更新状态。
// 设置 url 状态
const setState = (s: React.SetStateAction<State>) => {
const newQuery = typeof s === 'function' ? s(targetQuery) : s;
// 1. 如果 setState 后,search 没变化,就需要 update 来触发一次更新。比如 demo1 直接点击 clear,就需要 update 来触发更新。
// 2. update 和 history 的更新会合并,不会造成多次更新
update();
if (history) {
history[navigateMode]({
hash: location.hash,
search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
});
}
if (navigate) {
navigate(
{
hash: location.hash,
search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
},
{
replace: navigateMode === 'replace',
},
);
}
};

思考与总结

工具库中假如某个工具函数/hook 依赖于一个开发者可能并不会使用的包,而且这个包的体积还比较大的时候,可以将这个工具函数/hook 独立成一个 npm 包,开发者使用的时候才进行安装。另外这种可以考虑使用 monoRepo 的包管理方法,方便进行文档管理以及一些公共包管理等。

责任编辑:武晓燕 来源: 前端杂货铺
相关推荐

2021-08-27 07:06:10

IOJava抽象

2022-02-14 07:03:31

网站安全MFA

2022-06-26 09:40:55

Django框架服务

2023-08-02 08:35:54

文件操作数据源

2021-07-31 11:40:55

Openresty开源

2022-08-01 07:57:03

数组操作内存

2022-12-05 09:10:21

2021-11-09 23:54:19

开发SMI Linkerd

2022-08-30 13:48:16

LinuxMySQL内存

2021-11-04 06:58:31

CSS性能设备

2022-03-15 20:18:35

单元测试工具

2021-10-26 09:55:52

CAP理论分布式

2022-08-29 07:48:27

文件数据参数类型

2023-11-30 07:40:05

URLCMS

2021-11-15 11:03:09

接口压测工具

2022-03-31 18:59:43

数据库InnoDBMySQL

2021-12-29 08:27:05

ByteBuffer磁盘服务器

2022-03-08 17:52:58

TCP格式IP

2024-08-02 09:49:35

Spring流程Tomcat

2024-06-17 11:59:39

点赞
收藏

51CTO技术栈公众号