剖析的源码来自https://github.com/alibaba/ho…
useUrlState
简介
useUrlState是一个通过url query来治理state的Hook。url query，即网页url的问号前面跟着的一串属性值。该hook利用次要在以下两个方面：
- 将组建的属性值晋升到url进行治理。
- 利用该hook来治理url的query。
useUrlState能够做到不刷新页面即可扭转query参数，应用起来比拟不便。
useUrlState有个比拟非凡的中央在于：应用它是须要独立装置@ahooksjs/use-url-state库的，源码中它也与其余hook寄存在了不同的地位。可能是因为useUrlState须要应用react-router和query-string，因而按需下载，防止无意义的多下载几个库。
根本用法
它的用法比较简单，同useSetState相似，初始值都为对象中的键值对；应用如setState（即result的第二个参数）传入须要扭转的键值对即可，也可传入函数；不同之处在于无奈减少属性值。
简略用例
该用例来自官网文档，实现了其根本用法：将状态同步到 url query 中。而后通过设置值为 undefined,能够将属性复原为一开始传入的默认值。
import React from 'react';
import useUrlState from '@ahooksjs/use-url-state';
export default () => {
const [state, setState] = useUrlState({ count: '1' });
return (
<>
<button
style={{ marginRight: 8 }}
type="button"
onClick={() => setState({ count: Number(state.count || 0) + 1 })}
>
add
</button>
<button type="button" onClick={() => setState({ count: undefined })}>
clear
</button>
<div>state: {state?.count}</div>
</>
);
};源码剖析
首先是一些接口和类型的定义。
//...省略局部
const rc = tmp as any;
//options参数接口：
export interface Options {
navigateMode?: 'push' | 'replace';//状态变更时切换 history 的形式
parseOptions?: ParseOptions;//query-string parse 的配置
stringifyOptions?: StringifyOptions;//query-string stringify 的配置
}
//parseOptions的默认定义
const baseParseConfig: ParseOptions = {
parseNumbers: false,
parseBooleans: false,
};
//stringifyOptions的默认定义
const baseStringifyConfig: StringifyOptions = {
skipNull: false,
skipEmptyString: false,
};
//定义类型UrlState为<string, any>键值对
type UrlState = Record<string, any>;
对传入的参数进行了肯定的默认值合并解决，接着获取以后url的location对象，获取传入的心state值，辨别react-router的5或6版本来对新旧state值进行合并。
对步骤的具体解析写于代码中的正文局部。
const useUrlState = <S extends UrlState = UrlState>(
initialState?: S | (() => S),
options?: Options,
) => {
type State = Partial<{ [key in keyof S]: any }>;
const { navigateMode = 'push', parseOptions, stringifyOptions } = options || {};
const mergedParseOptions = { ...baseParseConfig, ...parseOptions };
const mergedStringifyOptions = { ...baseStringifyConfig, ...stringifyOptions };
//useLocation返回示意以后页面的location对象。location对象蕴含无关以后 URL 的信息。
//上面用到的有：search、hash
const location = rc.useLocation();
// 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 || {},
);
//当location.search扭转的时候，将url的query转换成对象
//在本系列上一篇文章中曾经解释过useMemo的作用，有选择性地进行从新执行，缩小耗费。
const queryFromUrl = useMemo(
() => {
return parse(location.search, mergedParseOptions);
}, [location.search]);
//当queryFromUrl扭转的时候，返回目前的query值
const targetQuery: State = useMemo(
() => ({
...initialStateRef.current,
...queryFromUrl,
}),
[queryFromUrl],
);
//获取传入的newstate值，并且反对传入函数
const setState = (s: React.SetStateAction<State>) => {
const newQuery = typeof s === 'function' ? s(targetQuery) : s;
// 1. 如果 setState 后，search 没变动，就须要 update 来触发一次更新。
// 2. update 和 history 的更新会合并，不会造成屡次更新。
update();
if (history) {
history[navigateMode]({
hash: location.hash,
//合并新旧state，并利用stringify进行转换
search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
});
}
if (navigate) {
navigate(
{
hash: location.hash,
search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
},
{
replace: navigateMode === 'replace',
},
);
}
};
return [targetQuery, useMemoizedFn(setState)] as const;
};
export default useUrlState;要点剖析
useLocation
useLocation返回示意以后页面的location对象。location对象蕴含无关以后 URL 的信息。
在该源码应用到的是hash和search信息。
- hash：=从井号 (#) 开始的 URL（锚）。该源码中间接获取了以后url的hash值，并未扭转。
- search：=从问号 (?) 开始的 URL（查问局部），相当于query，也就是useUrlState重点解决的局部。
useUpdate
一个能够强制组件渲染的hook，用法极其简略， const update = useUpdate();而后update();即可。
parse, stringify
来自query-string库，作用是将对象和url的query（如‘?name=abc&class=2’）这两种格局进行相互转换。
useRef
useRef 返回一个可变的 ref 对象，其.current属性被初始化为传入的参数（initialValue），能够用来保留数据，返回的ref对象在组件的整个生命周期内继续存在。在这里用它来保留传入的初始值（以便当革除某个属性的时候，能够返回该属性的初始值）
参考资料：
https://cloud.tencent.com/dev…
https://react.docschina.org/d…
