React学习-Hook路由及URL管理

Posted 2021-09-06 火腿肠烧烤大赛冠军

react更改页面头部

1. 安装hel-met
2. 对应位置新增配置：

    <div>
            <Helmet>
        <title>
          项目列表
        </title>
      </Helmet>
      <SearchPanel users={users} param={param} setParam={setParam} />
      <List loading={isLoading} users={users} dataSource={list || []} />
    </div>

或使用默认API

export const useDocumentTitle = (title:string,keepOnUnmount:boolean) =>{
  const oldTitle = document.title
  useEffect(()=>{
    document.title = title
  },[title])
  useEffect(()=>{
    return ()=>{
      if(!keepOnUnmount){
        document.title = oldTitle
      }
    }
  })
}

reactHook与闭包的坑

reacthook每次只会打印初始创建的之无论新增几次都是新增的而不是之前的
在useEffect中新增num依赖即可解决

useRef

返回一个ref对象可以使保存的值在react的整个生命周期保持不变

react-router、react-router-dom

路由跳转：

 return <Link to={String(project.id)}>{project.name}</Link>

路由配置：

        <Router>
        <Routes>
          <Route path={"/projects"} element = { <ProjectListScreen />}></Route>
          <Route path={"/projects/:projectId/*"} element = { <ProjectScreen />}></Route>
        </Routes>
        </Router>

跳转失败：

          <Navigate to={'/projects'} />

切换跟路由：

export const resetRouter = ()=>{
  window.location.href = window.location.origin;
}

初步实现useQueryQueryParam操作路由

as const可以让ts不设置数组而是设置成当前的类型

import { useSearchParams } from "react-router-dom"
/**
 * 返回页面中指定键的返回格式
 */
export const useUrlQueryParam = (keys:string[])=>{
    const [searchParams,setSearchParam] = useSearchParams();
    return [keys.reduce((prev:{},key:string)=>{
        return {...prev,[key]:searchParams.get(key)||''}
    },{} as {[key in string]:string}),
    setSearchParam
] as const
}

useMemo解决依赖循环问题

 npm i @welldone-software/why-did-you-render

useMemo：
防止页面无限刷新而产生的api 让值是否重新获取取决于另外一个值的变化

export const useUrlQueryParam = <K extends string>(keys: K[]) => {
  const [searchParams, setSearchParam] = useSearchParams();
  return [
    useMemo(()=>    keys.reduce((prev, key) => {
        return { ...prev, [key]: searchParams.get(key) || "" };
      }, {} as { [key in K]: string }),[searchParams]),
    setSearchParam,
  ] as const;
};

iterator

迭代器：使用迭代器合并对象数组（如下代码将一个对象转化成数组形式）

export const useUrlQueryParam = <K extends string>(keys: K[]) => {
  const [searchParams, setSearchParam] = useSearchParams();
  return [
    useMemo(()=>    keys.reduce((prev, key) => {
        return { ...prev, [key]: searchParams.get(key) || "" };
      // eslint-disable-next-line react-hooks/exhaustive-deps
      }, {} as { [key in K]: string }),[searchParams]),
    (
        params:Partial<{[key in K ]:unknown}>
    )=>{
        const o = clearnObject({...Object.fromEntries(searchParams), ...params }) as URLSearchParamsInit;
        return setSearchParam(o)
    }
  ] as const;
};