携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 17 天，点击查看活动详情
大家好，我是爱吃鱼的桶哥Z。在使用React开发的过程中，我们需要用到React-Router，也就是路由的功能，而React-Router有两种模式，今天我们就一起来学习一下如何封住一个自定义的Hook来监听url中hash的变化，让我们一起来实现一下吧！
useHash
我们可以通过window.location.hash来监听url的变化，在React中我们需要写一个自定义的Hook来帮我们完成hash的监听。我们需要用useState将location对象的值进行存储；使用useCallback将location变化的函数进行存储；使用useEffect监听hashchange事件，并且当组件卸载的时候将其进行清除；最后我们还需要再次使用useCallback创建一个函数用于hash值变化的存储对象，这样当hash值发生变化时，能够判断这个值在之前是否存在过，以此来提高组件的性能。那么下面让我们一起来看一下代码的实现，如下：
import React, { useState, useCallback, useEffect } from 'react';
const useHash = () => {
const [hash, setHash] = useState(window.location.hash);
// 当hash发生变化时
const handleChangeEvent = useCallback(() => {
setHash(window.location.hash);
}, []);
useEffect(() => {
// 监听 hashchange ，当 hash 发生变化时执行
window.addEventListener('hashchange', handleChangeEvent);
// 组件卸载时将监听事件进行移除
return () => {
window.removeEventListener('hashchange', handleChangeEvent);
};
}, []);
// 更新 hash
const updateHash = useCallback((newHash: string) => {
// 只有当新输入的 hash 跟原有的 hanh 不一致时才进行更新
if (newHash !== hash) {
window.location.hash = newHash;
}
}, [hash]);
// 将当前的 hash 和 updateHash 暴露出去给外面进行使用
return [hash, updateHash];
};
export default useHash;
上述的代码中，我们通过监听window.location.hash的变化来改变当前url的值，下面我们一起来看一下如何使用，代码如下：
import React, { FC, useEffect } from 'react';
import useHash from './hooks/useHash';
const Demo: FC = () => {
const [hash, setHash] = useHash();
useEffect(() => {
setHash('#list');
}, []);
return (
<>
<p>window.location.href: {window.location.href}</p>
<p>Edit hash: </p>
<input value={hash} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setHash(e.target.value)} />
</>
);
};
export default Demo;
当组件加载完成后，会获取url中的hash值，当我们在input中修改时,url中的hash值也会跟着变化，但是页面是不会刷新的，我们可以监听不同的hash值来渲染不同的内容，这也是就是React-Router中hash模式的大致实现原理。
最终执行的效果如图所示：
可以狠戳这里进行查看。
最后
我们在日常的开发中，经常会与url中的参数打交道，当我们理解了一些基础的原理后，再去用一些别人造好的轮子，就能知道里面的具体实现是怎么样的了，看到这里，你对useHash这个自定义Hook还有什么其他的想法或者看法吗？欢迎在留言区进行讨论。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
