[JavaScript知识库]【封装 Hooks】useHash（获取和更新 URL hash 值）

基本用法

• 封装的文件：useHash.ts

import { useState, useCallback, useEffect } from 'react';

/**
 * 获取和更新 URL hash 值
 */
export const useHash = () => {
  const [hash, setHash] = useState(() => window.location.hash);

  const onHashChange = useCallback(() => {
    setHash(window.location.hash);
  }, []);

  useEffect(() => {
    window.addEventListener('hashchange', onHashChange);
    return () => {
      window.removeEventListener('hashchange', onHashChange);
    };
  }, []);

  const _setHash = useCallback(
    (newHash: string) => {
      if (newHash !== hash) {
        window.location.hash = newHash;
      }
    },
    [hash],
  );

  return [hash, _setHash] as const;
};

• 组件中使用

import { useHash } from './useHash';

export default function App(){
	const [hash, setHash] = useHash();
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖