反应 - 去抖动+ useEffect

Question

我在我的 React 组件中创建了一个 debounced 方法。

const [count, setCount] = useState(0);

const lazyLog = useCallback(
  _.debounce(() => { console.log(count) }, 5000),
  [count]
);

我在 useEffect 中调用它，每次count更新时：

useEffect(() => {
  lazyLog();
}, [count])

我遇到的问题是，由于在每次渲染时都重新创建了 lazyLog 方法，因此没有正确应用debounce功能。

您可以查看此小吃以测试代码。

我该如何修复代码？ 由于 useCallback 必须包含依赖项......我找不到任何简单的方法来处理这个......有什么想法吗？

Answer 1

State 是陈旧的，因为它没有包含在useCallback的依赖数组中。 现在，如果您添加deBounce将不起作用。

解决方案是使用ref并在其中保存 state 的副本。 然后在debounce中使用它。 （ 代码沙盒）

另外 - [count]应该是[] in useCallback 。

const refValue = useRef(count);

const lazyLog = useCallback(
    _.debounce(() => {
      console.log("debounce", refValue.current);
    }, 2000),
    [] // empty
  );

  useEffect(() => {
    refValue.current = count;
    lazyLog();
  }, [count]);

Answer 2

我根本不喜欢评论中描述的useDebounce挂钩，因为我想去抖动回调而不是值。

我认为，为了避免陈旧的 state 出现问题，我会将计数器作为参数传递，而不是直接从我的 state 中使用它。

export default function App() {
  const [count, setCount] = useState(0);

  const lazyLog = useCallback(
    _.debounce((count) => { console.log(count); }, 5000),
    []
  );

  useEffect(() => {
    lazyLog(count);
  }, [count])

  return (
    <View>
      <Text onPress={() => setCount(prevCount => prevCount + 1)}>
        Increase
      </Text>
    </View>
  );
}

https://snack.expo.dev/67W9HnsRD

不像它应该的那样干净，但只要做一些最小的改动就可以正常工作。