react中useQueryParam这什么意思，有什么作用。用TS写个实例

`useQueryParam` 是一个自定义 React Hook，它可以帮助我们在 URL 参数中管理单个或多个查询参数。

使用它的好处是可以使 URL 与应用状态保持同步，使得浏览器的前进和后退按钮可用，并且可以方便地与其他人分享 URL。

以下是一个使用 TypeScript 编写的 `useQueryParam` 的示例：

import { useState, useEffect } from 'react'
import { useLocation, useHistory } from 'react-router-dom'
import qs from 'qs'

interface QueryParams {
  [key: string]: string | undefined
}

const useQueryParam = <T extends QueryParams>(
  key: string,
  defaultValue?: T
): [T | undefined, (value: T) => void] => {
  const location = useLocation()
  const history = useHistory()

  const [value, setValue] = useState<T | undefined>(() => {
    const queryParams = qs.parse(location.search, { ignoreQueryPrefix: true })
    const paramValue = queryParams[key]
    if (paramValue) {
      return JSON.parse(paramValue) as T
    }
    return defaultValue
  })

  useEffect(() => {
    if (value === undefined) {
      const queryParams = qs.parse(location.search, { ignoreQueryPrefix: true })
      delete queryParams[key]
      const search = qs.stringify(queryParams, { encode: false })
      history.replace({ search })
    } else {
      const queryParams = qs.parse(location.search, { ignoreQueryPrefix: true })
      queryParams[key] = JSON.stringify(value)
      const search = qs.stringify(queryParams, { encode: false })
      history.replace({ search })
    }
  }, [key, value, location.search, history])

  return [value, setValue]
}

export default useQueryParam

上面的示例中，我们定义了一个泛型类型 `T`，它是一个对象，其属性名为字符串，属性值为字符串或 undefined。`useQueryParam` 返回一个元组，第一个元素是查询参数的值，第二个元素是一个函数，用于更新查询参数的值。我们可以按照以下方式使用 `useQueryParam`：

import React from 'react'
import useQueryParam from './useQueryParam'

interface Filters {
  keyword: string
  category: string
}

const MyComponent: React.FC = () => {
  const [filters, setFilters] = useQueryParam<Filters>('filters', { keyword: '', category: '' })

  const handleKeywordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFilters({ ...filters, keyword: event.target.value })
  }

  const handleCategoryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setFilters({ ...filters, category: event.target.value })
  }

  return (
    <div>
      <input type="text" value={filters.keyword} onChange={handleKeywordChange} />
      <select value={filters.category} onChange={handleCategoryChange}>
        <option value="food">Food</option>
        <option value="drink">Drink</option>
      </select>
    </div>
  )
}

export default MyComponent

在上面的示例中，我们使用 `useQueryParam` 来管理名为 `filters` 的查询参数。`filters` 是一个对象，包含两个属性：`keyword` 和 `category`。我们使用 `setFilters` 函数来更新这些属性的值。当 URL 中的查询参数更改时，`useQueryParam` 会自动更新组件的状态，并重新渲染组件。