如何使用反应钩子减慢/去抖动事件处理？答案

【问题标题】：How to slowdown/debounce events handling with react hooks?如何使用反应钩子减慢/去抖动事件处理？
【发布时间】：2019-06-01 08:31:14
【问题描述】：

句柄滚动事件会经常触发。减速/去抖动的方法是什么？如果可能的话，我希望最后一个事件总是被触发而不是被跳过。

  const handleScroll = event => {
    //how to debounse scroll change?
    //if you will just setValue here, it's will lag as hell on scroll
  }


  useEffect(() => {
    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

这是来自xnimorz 的 useDebounce 挂钩示例

import { useState, useEffect } from 'react'

export const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value)
      }, delay)

      return () => {
        clearTimeout(handler)
      }
    },
    [value, delay]
  )

  return debouncedValue
}

【问题讨论】：

标签： reactjs debouncing react-hooks debounce

【解决方案1】：

使用钩子的事件处理程序可以像任何其他具有任何 debounce 实现的函数一样进行 debounce，例如罗达什：

  const updateValue = _.debounce(val => {
    setState(val);
  }, 100);

  const handleScroll = event => {
    // process event object if needed
    updateValue(...);
  }

请注意，由于 React 合成事件的工作方式，event 对象在事件处理程序中使用时需要同步处理。

最后一个事件总是被触发而不是跳过

预计只有最后一次调用才会考虑到去抖动功能，除非实现允许更改它，例如Lodash debounce 中的 leading 和 trailing 选项。

【讨论】：

所以我需要 Lodash 库来让这个 _.debounce 工作？有没有没有外部库的方法？
您需要自己编写此功能。在这一点上，这并不是特定于 React 或钩子的。见stackoverflow.com/questions/20695334/…。这不是一种高效的做事方式，因为这就是图书馆存在的目的。 FWIW，Lodash 实现比简单的 setTimeout 实现提供了更好的性能。
如果你不想完全导入 lodash，你可以使用这个：npmjs.com/package/lodash.debounce

【解决方案2】：

const debounceLoadData = useCallback(debounce((debounceValue)=>{  
    props.setSenderAddress(debounceValue)
}, 300), []);

【讨论】：