ts代码段

ts传入的参数，要定义类型， interface

...(() => {}) 结构空函数，返回一个空对象

Event

function onScrollChange(e: React.WheelEvent) {
  const top = (e.target as HTMLElement).scrollTop;
}

function useDebounce(callback: () => void, value ?: number, ms: unknow) {}
// 限制键值对
function cleanObject(object: {[key: string]: unknown}) {}

useDocumentTitle

import { useEffect, useRef, useMemo } from 'react';
function useDocumentTitle1(title: string, keepOnUnmount: boolean = true) {
  const oldTitle = document.title;
  useEffect(() => {
    document.title = title;
  }, [title]);
  useEffect(() => {
    return () => {
            if (keepOnUnmount) return;
      // 如果不指定依赖，获取到的title就是初始的title
            document.title = oldTitle;
        };
  }, [])
}
// 修改页面标题
function useDocumentTitle(title: string, keepOnUnmount: boolean = true) {
    const oldTitle = useRef(document.title).current;
    useEffect(() => {
        document.title = title;
    }, [title]);
    useEffect(() => {
        return () => {
            if (keepOnUnmount) return;
            document.title = oldTitle;
        };
    }, [keepOnUnmount, oldTitle]);
}

useParams

import { useSearchParams, URLSearchParamsInit } from 'react-router-dom';
// 获取URL的参数，指定 key的值
function useUrlQueryParams2(keys: string[]) {
  const [state, setState] = useSearchParams();
  const params = keys.reduce((prev, key) => {
    return {...prev, [key]: state.get(key) || ''}
  }, {} as {[key in string]: string})
  return [
    params,
    setState
  ] as const
}
function useUrlQueryParams3<K extends string>(keys: K[]) {
    const [state, setState] = useSearchParams();
    const params = useMemo(() => {
    return keys.reduce((prev, key) => {
            return { ...prev, [key]: state.get(key) || "" };
        }, {} as { [key in K]: string });
  }, [state]);
    return [params, setState] as const;
}
function useUrlQueryParams<K extends string>(keys: K[]) {
    const [state, setState] = useSearchParams();
    const params = useMemo(() => {
        return keys.reduce((prev, key) => {
            return { ...prev, [key]: state.get(key) || "" };
        }, {} as { [key in K]: string });
    }, [state]);
    return [
    params,
    (param: Partial<{[key in K]: unknown}>) => {
      const values = {...Object.fromEntries(state), ...param} as URLSearchParamsInit;
      return setState(values)
    }
  ] as const;
}
// useUrlQueryParams(['user', 'tenant'])

形参Props

interface SearchProps {
    users: User[],
  params: {
      name: string;
    id: number;
  },
  setParams: (params: SearchProps['params']) => void,
}
function Search({users, params, setParams}: SearchProps) {}

类型守卫

Props组件封装

ComponentProps
Omit

useHooks封装注意

tuple

export const useProjectModal = () => {
  const [{ projectCreate }, setProjectCreate] = useUrlQueryParam([
    "projectCreate",
  ]);
  const [{ editingProjectId }, setEditingProjectId] = useUrlQueryParam([
    "editingProjectId",
  ]);
  const setUrlParams = useSetUrlSearchParam();
  const { data: editingProject, isLoading } = useProject(
    Number(editingProjectId)
  );
  const open = () => setProjectCreate({ projectCreate: true });
  const close = () => setUrlParams({ projectCreate: "", editingProjectId: "" });
  const startEdit = (id: number) =>
    setEditingProjectId({ editingProjectId: id });
  return {
    projectModalOpen: projectCreate === "true" || Boolean(editingProjectId),
    open,
    close,
    startEdit,
    editingProject,
    isLoading,
  };
};

import { URLSearchParamsInit, useSearchParams } from "react-router-dom";
export const useUrlQueryParam = <K extends string>(keys: K[]) => {
  const [searchParams] = useSearchParams();
  const setSearchParams = useSetUrlSearchParam();
  const [stateKeys] = useState(keys);
  return [
    useMemo(
      () =>
      subset(Object.fromEntries(searchParams), stateKeys) as {
        [key in K]: string;
      },
      [searchParams, stateKeys]
    ),
    (params: Partial<{ [key in K]: unknown }>) => {
      return setSearchParams(params) // iterator
    },
  ] as const;
};