使用TypeScript React對點擊事件函數進行去抖動處理

Question

我正在嘗試在onclick函數上實現lodash debounce函數，以避免在按鈕上點擊多次。我想出來的解決方案如下：

function saveForm() {
//在這裡做一些操作
}

<Button onClick={debounce(() => saveForm, 1500, {
              maxWait: 2000 })}>
              儲存
</Button>

我看到很多例子都是在返回之外的函數上執行debounce，然後在onclick中使用該debounced函數。直接在按鈕元素上執行debounce（內嵌）是錯誤的做法嗎？

Answer 1

就良好的編碼實踐而言，你應該避免在JSX中放置過多的業務邏輯。只要將你的onClick處理程序提取到JSX之外即可。

其次，你不希望在防手震後回到saveForm。而是調用它。所以用saveForm取代() => saveForm。

function saveForm() {
//在这里执行操作
}

const debouncedClickHandler = debounce(saveForm, 1500, {maxWait: 2000})

<Button onClick={debouncedClickHandler}>保存</Button>

你也可以使用useCallback鉤子。如果需要，我把使用useCallback鉤子的最佳實踐留給你去探索。