实用的 useSearchParam 钩子函数

进二开物2023-11-13 1:35

why?

在 React 开发中，在 search 中获取 param 数据，十分常用，但是似乎但是每次都要手动的使用URLSearchParams 构造函数然后获取 params, 这其实不符合 React 的钩子函数的开发范式，可以将 param 的获取封装到自定义 hooks 中每次使用的时候，字节调用钩子函数即可。

封装一个通用的钩子函数需要考虑哪些问题？

以 react-use 为例，需要考虑这些问题

当前环境，因为 react 有服务端渲染，考虑 nodejs 环境
通过 URLSearchParams 获取 search params
同时需要监听路由的变化：popstate/pushstate/replacestate 这些变化

实现

ts 复制代码

import { useEffect, useState } from 'react';
import { isBrowser, off, on } from './misc/util';

const getValue = (search: string, param: string) => new URLSearchParams(search).get(param);

export type UseQueryParam = (param: string) => string | null;

const useSearchParam: UseQueryParam = (param) => {
  const location = window.location;
  const [value, setValue] = useState<string | null>(() => getValue(location.search, param));

  useEffect(() => {
    const onChange = () => {
      setValue(getValue(location.search, param));
    };

    on(window, 'popstate', onChange);
    on(window, 'pushstate', onChange);
    on(window, 'replacestate', onChange);

    return () => {
      off(window, 'popstate', onChange);
      off(window, 'pushstate', onChange);
      off(window, 'replacestate', onChange);
    };
  }, []);

  return value;
};

const useSearchParamServer = () => null;

export default isBrowser ? useSearchParam : useSearchParamServer;

名字需要以 use 开头。
getValue 函数封装是需要传入 search 和需要查找的目标 param 封装在函里面计算目标数据。
定义状态保存目标 param 的状态，和更新 param 的函数。
返回值是 value，也就是查询的 param 的值。
由于路由可能发生变化, 在 useEffect 中完成对实践的监听,并使用 getValue 重新计算。

小结

写这篇文章目的是在一些通用的，和符合规范的方面，尽量与规范靠齐。同时学会自己封装一个通用的函数，钩子函数。加速自己的开发效率。