Hooks + TS 搭建一個任務管理系統（四）-- 搜索功能實作

📢 大家好，我是小丞同學，一名大二的前端愛好者

📢 這個系列文章是實戰 jira 任務管理系統的一個學習總結

📢 非常感謝你的閱讀，不對的地方歡迎指正 🙏

📢 愿你忠于自己，熱愛生活

在上一篇文章中，我們已經寫過了關于專案串列展示的部分，通過大量的 custom hook 實作了專案的增刪改查，也寫很多復用性很高的 hook ，這樣我們可以在后面的代碼中復用，優化和縮減我們的開發時間

💡 知識點搶先看

• 封裝 userSelect 組件
• 將輸入框內容映射到 url 上
• 利用防抖優化輸入框請求

先獻上效果圖

一、封裝 UserSelect 組件

這次的專案采用的是 Antd 組件庫，在這部分中我們采用 Form 表單以及 Input 來實作搜索框的樣式，對于下拉框，將采用以 Select 組件為基礎的 UserSelect 自定義組件

重新封裝 Select 組件，在這里我們首先是封裝了一個 IdSelect 組件，再在這個組件的基礎上抽象一個 UserSelect 組件

這樣做的目的是為了讓 IdSelect 組件能夠實作復用

下面我們先來寫 IdSelect 組件吧，從名字上也可以看出，它是通過 id 來選擇 option 的

在前面的文章中，我們也有提到過，利用 antd 組件來封裝自定義組件，需要繼承它的原先的型別，來保持它的 props 正常作業

我們先來看看 IdSelect 應當接收的引數型別

// 繼承 Select 身上的方法
type SelectProps = React.ComponentProps<typeof Select>
// 在 type 中定義公共型別
interface IdSelectProps extends Omit<SelectProps, 'value' | "onChange" | "options" | "defaultOptionName"> {
    value?: Raw | null | undefined,
    // onChange 只能傳入number
    onChange?: (value?: number) => void,
    defaultOptionName?: string,
    options?: { name: string, id: number }[]
}

它的型別還是比較復雜的

首先是 SelectProps 定義的一個型別等于 Select 的型別，再在 IdSelectProps 的型別中繼承部分的 SelectProps 型別

為什么說是部分呢？

由于我們原生的 Select 組件中對于 onChange 屬性的型別是采用泛型來定義的，這會導致我們的 number 型別資料轉化成 string ，總之就會導致最后的后端回傳資料的型別和 Select 中的型別不一致，因此我們需要將 onChange 限制為 number 型別

這個是 onChange 的型別宣告

onChange?: (value: ValueType, option: OptionsType[number] | OptionsType) => void;

同時對于一些型別我們有自己明確的型別，因此我們不需要采用它原生的型別，我們自己重新定義

因此我們采用 Omit 關鍵字來除去 SelectProps 中的部分型別宣告，重新寫一份

Omit<SelectProps, 'value' | "onChange" | "options" | "defaultOptionName">

這樣我們就完成了對 Select 資料型別的封裝，接著我們需要將一些相關的配置全部傳遞給它們

例如，value 屬性的默認值，onChange 的執行時機，以及 defaultOptionName

export const IdSelect = (props: IdSelectProps) => {
    const { value, onChange, defaultOptionName, options, ...restProps } = props
    return <Select
    // 這里設定了value ：0 ，當我們資料還沒有回傳的時候，它會顯示 負責人字樣
        value={options?.length ? toNumber(value) : 0}
        onChange={value => onChange?.(toNumber(value) || undefined)}
        {...restProps}
    >
        {
            defaultOptionName ? <Select.Option value={0}>{defaultOptionName}</Select.Option> : null
        }
        {
            options?.map(option => <Select.Option key={option.id} value={option.id}>{option.name}</Select.Option>)
        }
    </Select>
}

代碼的思路很簡單，當沒有 options 時，value 設定為 0 ，顯示默認負責人，同時我們需要對傳入的 value 進行型別轉化，保證它是 number 型別

這樣我們的 IdSelect 就封裝好了，它相對于 Select 有更加嚴格的型別要求，以確保我們傳遞的引數型別不會出錯

接著我們將這個 IdSelect 特殊化到 User 中，再封裝一個 UserSelect 給 project 中按照人員查找來使用

export const UserSelect = (props:React.ComponentProps<typeof IdSelect>)=>{
    const {data:users} = useUsers()
    return <IdSelect options={users|| []} {...props}></IdSelect>
}

寫熟練了真是隨便拿捏

同樣的，我們的資料型別繼承自 IdSelect ，然后，我們先直接傳入我們的 Users 資料，實作了一個 UserSelect

為什么這樣就可以了呢？

我們將資料傳遞下去之后，得到的 Select 就是一個人員串列了，這樣我們只需要做一些其他配置就可以了，不需要考慮人員資料的問題

接著，我們在搜索部分的 Form 表單中，使用這個組件

// search-panel.tsx
<UserSelect
// 默認選項
    defaultOptionName={'負責人'}
    value={param.personId}
    onChange={value =>
        setParam({
            ...param,
            personId: value
        })} />

在這里我們配置了默認選型，以及通過 props 傳遞的用戶 id （param.personId），同時在輸入框被選擇時觸發的事件，用來操控我們的頁面 url 變化

二、將輸入框內容映射到 url 上

在上一小節我們最后談到了 url 的變化，確實如此，當我們在輸入框中輸入內容時，或者時 Select 中選擇內容時，都應該要映射到 url 中，這樣我們將 url 復制在新頁面打開，還會保留同樣的資訊，這種功能也是非常常見的，例如掘金社區的文章標題，h1、h2 標簽

因此我們有理由，有必要實作這樣的功能！

想到 url 操作，我們很容易想到我們的 useProjectsQueryKey 這一類 hook，當然這有一定的關系

在這里我們需要使用我們之前封裝過的 useProjectsSearchParams 這個 custom hook ，

我們先再看看這個 hook 的原始碼

export const useProjectsSearchParams = () => {
    // 回傳的是一個新的物件，造成地址不斷改變，不斷的渲染
    const [param, setParam] = useUrlQueryParam(['name', 'personId'])
    return [
        // 采用 useMemo 解決 重復呼叫的問題
        useMemo(() => ({ ...param, personId: Number(param.personId) || undefined }), [param]),
        setParam
    ] as const
}

簡單梳理一下，就是通過 useUrlQueryParam 來設定和查詢相關的query 資料，回傳的是一個陣列，形式類似于 useState ，一個是值，一個更改這個值

我們可以看到這個 hook 監聽的 url query 是 name、personId 也就是專案名和負責人，正符合我們的查詢需求

我們先在 ProjectListScreen 這個 project 的最外層組件中暴露 hook 中回傳的兩個方法

const [param, setParam] = useProjectsSearchParams()

這樣如果我們通過 setParam 導致了 param 的變化，就會觸發 useUrlQueryParam 實作頁面的 url 的更新

例如這里的搜索模塊，我們通過 props 傳遞 setParam 方法給子組件

<SearchPanel users={users || []} param={param} setParam={setParam} />

在子組件中使用這個方法來控制 param 的變化，從而引起 url 的變化

例如，我們在監聽 input 框輸入時

<Input
    type="text"
    placeholder={'專案名'}
    value={param.name}
    onChange={e => setParam({
        ...param,
        name: e.target.value
    })} />

我們在 onChange 中呼叫了 setParam 設定了新的 param 值，在 UserSelect 中同樣的采用這樣的方式修改 param 值，觸發 url 的更新，這樣我們的功能就實作了一半了，接下來我們需要利用當前用戶查詢的 param 去獲取資料

const { isLoading, error, data: list} = useProjects(param, 200)

回傳獲取到的結果和狀態即可，這里采用的 useProjects ，是一個封裝的 custom hook ，它會在 param 變化時 ，通過 useQuery 不斷的請求資料，這也是我們回傳的資料中能夠有 isLoading、error 這些的原因

在這里提一下 useQuery ，它是 reacy-query 中的一個 api ，用來做快取的，接收的第一個引數是用來起名字，第二個引數是異步請求，它會把請求的結果放到快取中，但是這個快取不是瀏覽器快取

第一個引數可以是一個陣列，類似于 useEffect ，當依賴項變化的時候就會觸發 useQuery 重新執行

export const useProjects = (param?: Partial<Project>) => {
    const client = useHttp()
    // 當 param 變化的時候觸發 useQuery 重新渲染，我們需要在第一個引數中傳入一個陣列，陣列的第二位傳入依賴
    return useQuery<Project[]>(['projects', param], () => client('projects', { data: param }))
}

現在我們的功能也算是基本實作了，但是我們打開控制臺會發現有很多很多的請求，這并不是我們想要的，因此我們可以采用防抖，每隔多少秒，再請求一次

三、useDebounce 實作防抖

為了減少請求的次數，我們封裝了一個 useDebounce 方法，用來對資料進行防抖操作

關于防抖不必多說了吧，這里我們采用的是 useState 來創建這個全域變數，通過 set... 來控制它值的變化，也就這一點不一樣的地方

簡單說一說這里的泛型吧，這里我們采用了一個泛型 V ，第一個 <V> 是用來做泛型宣告的，它的型別由我們傳入的 value 來指定，value 是什么就是什么

export const useDebounce = <V>(value: V, delay?: number): any => {
    // 設定一個 debouncedValue 值，用于暫存值，以及監控變化
    const [debouncedValue, setDebouncedValue] = useState(value)
    useEffect(() => {
        // 接收一個定時器，引數為一個函式和延時時間 
        // 每次value變化，設定一個定時器
        const timeout = setTimeout(() => setDebouncedValue(value), delay)
        // 每次上一個useEffect 的定時器被清除，相當于上一個定時器被卸載了
        return () => clearTimeout(timeout)
        // 監聽value 和 delay 變化，當引數變化時，重新呼叫這個函式設定定時器
    }, [value, delay])
    // 回傳值
    return debouncedValue
}

📌 總結

在這篇文章中我們做完了專案串列的搜索模塊，我們能學到這些東西

1. 已有組件封裝新的組件引數型別問題
2. 如何 實作了輸入框與 url 統一
3. 采用 hook 實作防抖

最后，可能在很多地方講訴的不夠清晰，請見諒

💌 如果文章有什么錯誤的地方，或者有什么疑問，歡迎留言，也歡迎私信交流