国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园

前言

還記得上周我們團(tuán)隊(duì)在招聘前端工程師，一個(gè)看起來(lái)經(jīng)驗(yàn)豐富的候選人坐在我對(duì)面。

"你們項(xiàng)目中是如何處理按鈕重復(fù)點(diǎn)擊的問(wèn)題的？"我拋出了這個(gè)看似簡(jiǎn)單的問(wèn)題。

"這個(gè)簡(jiǎn)單，使用防抖就可以了。"他很快回答。

然而，當(dāng)我繼續(xù)追問(wèn)細(xì)節(jié)時(shí)，他卻陷入了沉思...

實(shí)際上，這個(gè)問(wèn)題看似簡(jiǎn)單，但是要真正的解決好，需要考慮很多細(xì)節(jié)。在我面試了很多候選人中，能完整答出來(lái)的不到20%。

問(wèn)題背景

在日常開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到這樣的場(chǎng)景：

• 用戶瘋狂點(diǎn)擊提交按鈕
• 表單重復(fù)提交導(dǎo)致數(shù)據(jù)異常
• 批量操作按鈕被連續(xù)觸發(fā)

這些問(wèn)題如果處理不當(dāng)，輕則影響用戶體驗(yàn)，重則可能造成數(shù)據(jù)錯(cuò)誤。今天，就讓我們通過(guò)一個(gè)真實(shí)的面試場(chǎng)景，逐步深入這個(gè)問(wèn)題

面試場(chǎng)景

面試官：項(xiàng)目中如何處理按鈕重復(fù)點(diǎn)擊的問(wèn)題？

候選人：可以使用防抖（debounce）。

js
?
const debouncedSubmit = debounce(submit, 300);

面試官：那假設(shè)我防抖設(shè)置了1秒,我現(xiàn)在請(qǐng)求了,但是接口響應(yīng)比較慢,要3秒,用戶在這3秒內(nèi)點(diǎn)擊了多次,那怎么辦? 防抖是不是就沒(méi)用了?

一般說(shuō)到這里,很多人就不知道怎么搞了

候選人：可以給按鈕加上 loading 狀態(tài)，點(diǎn)擊后設(shè)置 loading 為 true，等操作完成后再設(shè)置為 false。

jsx

const [loading, setLoading] = useState(false);

const handleSubmit = async () => {
    setLoading(true);
    try {
        await submitData();
    } finally {
        setLoading(false);
    }
}

面試官：這個(gè)思路不錯(cuò)，但是如果項(xiàng)目中有很多按鈕都需要這樣處理，你會(huì)怎么做？

候選人：額...每個(gè)按鈕都寫(xiě)一遍 loading 狀態(tài)管理？

面試官：那樣就會(huì)有很多重復(fù)代碼，有沒(méi)有想過(guò)怎么封裝呢？

到這里也卡掉了很多人

解決方案

我們可以封裝一個(gè)自定義 Hook

js

import {useState,useCallback,useRef} from 'react'

function useLock(asyncFn) {
    const [loading, setLoading] = useState(false)
    const asyncFnRef = useRef(null)
    asyncFnRef.current = asyncFn
    const run = useCallback(async (...args) => {
        if(loading) return
        setLoading(true)
        try {
            await asyncFnRef.current(...args)
        } finally {
            setLoading(false)
        }
    }, [loading])

    return [loading,run]
}

然后封裝一個(gè)通用的 Button 組件

jsx

import {Button as AntButton} from 'antd'

const Button = ({onClick,...props})=>{
    const {loading, run} = useLock(onClick || (()=> {}))
    return <AntButton loading={loading} {...props} onClick={run}></button>
}

使用示例

jsx

const Demo = () => {
    const handleSubmit = async () => {
        // 模擬異步請(qǐng)求
        await new Promise(resolve => setTimeout(resolve, 2000))
        console.log('提交成功')
    }

    return (
        <Button onClick={handleSubmit}>
            提交
        </Button>
    )
}

可以看到 在 handleSubmit 執(zhí)行的時(shí)候 Button 會(huì)自動(dòng)添加 loading, 在請(qǐng)求完成后 loading 會(huì)自動(dòng)變?yōu)?false。

方案優(yōu)勢(shì)

• 零侵入性 ：使用方式與普通按鈕完全一致
• 自動(dòng)處理 ：自動(dòng)管理 loading 狀態(tài)，無(wú)需手動(dòng)控制

希望這篇文章對(duì)你有幫助！

作者：葉小秋
鏈接：https://juejin.cn/post/7494944356534714406
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。