如何在 svelte 中使用 useCallback 鈎子

Question

這是我的代碼塊在 react 中與useCallback掛鈎使用時的外觀，但我想在 svelte 中使用相同的 function，但想在 useCallback 掛鈎中添加它。 是否有任何替代苗條。

const newCancelToken = useCallback(() => {
        axiosSource.current = axios.CancelToken.source();
        return axiosSource.current.token;
    }, []);

Answer 1

在 Svelte 中，只有在默認情況下更改依賴項時才會更新。 如有必要，您可能應該使用反應性語句（ $: ... ）； 他們也可以調用函數。

$: newCancelToken = updateToken(); // Add dependencies as arguments

function updateToken() {
    axiosSource.current = axios.CancelToken.source();
    return axiosSource.current.token;
}

如果您的 function 沒有任何依賴項，則可以按原樣使用 function。 在 Svelte 中，您還可以在模板中使用內聯函數，而無需一遍又一遍地重新聲明它們，因為代碼已經過分析、編譯和優化。

Answer 2

請記住： svelte 處理其組件的方式與 react 非常不同。

每當組件內的任何 state 或父組件中的任何位置發生更改時，React 都會重新渲染所有組件。 為避免重新計算，您需要在您的情況下使用useMemo或useCallback 。

Svelte 是一個編譯器，它會分析您的模板，以在任何相關的 state 發生更改時創建有針對性的 DOM 更新代碼。 考慮到這一點，您不需要使用 svelte 來記憶這些功能。