如何使用react-hooks减慢/消除事件处理速度？

IT技术 reactjs debouncing react-hooks debounce
2021-05-11 21:39:28

处理滚动事件会经常触发。有什么方法可以减缓/消除它？如果可能的话，我希望最后一个事件总是被触发而不是被跳过。

  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
}
2个回答

使用钩子的事件处理程序可以像任何其他具有任何去抖动实现的函数一样去抖动，例如 Lodash：

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

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

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

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

它的预期，只有最后一次通话是考虑到与去抖动功能，除非实现允许改变这一点，比如leading和trailing选项Lodashdebounce。

const debounceLoadData = useCallback(debounce((debounceValue)=>{  
    props.setSenderAddress(debounceValue)
}, 300), []);
其它你可能感兴趣的问题
上一篇为什么切片机的打印速度参数这么多？ 下一篇React.js 中的所有者和父组件有什么区别