Lodash节流阀不节流吗？

Question

我第一次试着申请房车油门。

我知道节流阀必须在useCallback内部应用，否则它将被称为每一个重呈现(在我的例子中，用户搜索的每一个新击键)。

我所拥有的代码是有效的，并且逻辑似乎是有意义的--但是节流阀没有被应用，所以api调用是每个按键都要执行的。

关于我的逻辑在哪里失败有什么建议吗？

import {
    useEffect,
    useCallback
} from 'react';
import { throttle } from 'lodash';
import { getAllUsers } from '../../../api/api';
import { USER_ROLE } from '../../../types/types'

interface IProps extends Omit<unknown, 'children'> {
    search?: string;
}

const DemoFanManagementTable = ({ search }: IProps): JSX.Element => {

    const getFans = (search?: string) => {
        console.log("getFans ran")
        const fans = getAllUsers({ search }, USER_ROLE.FAN);
        //logs a promise
        console.log("logging fans ", fans)
        return fans;
    }

    //throttledSearch is running every time search changes
    const throttledSearch = useCallback((search?: string) => {
        console.log("throttledSearch ran")
        return throttle(
            //throttle is not throttling, functions run every keystroke
            () => {
                getFans(search), 10000, { leading: true, trailing: true }
            }
        )
    }, [search])

    //useEffect is running every time search changes
    useEffect(() => {
        return throttledSearch(search)
    }, [search]);

    return (
        <div>
            {search}
        </div>
    );
};

export default DemoFanManagementTable;

Answer 1

这里有一些问题，首先，您已经将整个throttle函数包装为一个匿名函数，而不是仅仅是第一个param：

throttle(
  (search: string) => getFans(search),
  1000,
  { leading: true, trailing: true }
)

第二个useCallback不适合，因为每次调用它时，它都返回一个新的节流函数。

第三，您已经将[search]作为useCallback的一个依赖项传递给它，因此即使它如您所期望的那样工作，每次search更改时它也将失效，而且无论如何也不能工作。

更好的选择是useMemo，因为它在呈现时保持相同的节流函数。

const throttledSearch = useMemo(
  () =>
    throttle(
      (search: string) => getFans(search),
      10000,
      { leading: true, trailing: true }
    ),
  []
);

useEffect(() => {
  throttledSearch(search);
}, [search]);

由于getFans采用相同的搜索参数，所以可以将其缩短为：

const throttledSearch = useMemo(() =>
  throttle(getFans, 10000, { leading: true, trailing: true }),
[]);