reactjs – 如何使用React Hook进行油门或去抖？

发布时间：2020-12-15 09:31:48 所属栏目：百科来源：网络整理

导读：我试图在一个fonctionnal组件中使用lodash的节流方法,例如： const App = () = { const [value,setValue] = useState(0) useEffect(throttle(() = console.log(value),1000),[value]) return ( button onClick={() = setValue(value + 1)}{value}/button )}

我试图在一个fonctionnal组件中使用lodash的节流方法,例如：

const App = () => {
  const [value,setValue] = useState(0)
  useEffect(throttle(() => console.log(value),1000),[value])
  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

由于useEffect内部的方法在每次渲染时都重新声明,因此限制效果不起作用.

有人有一个简单的解决方案吗？

解决方法

您可能(并且可能需要) useRef在渲染之间存储值.就像它的 suggested for timers

这样的事情

const App = () => {
  const [value,setValue] = useState(0)
  const throttled = useRef(throttle((newValue) => console.log(newValue),1000))

  useEffect(() => throttled.current(value),[value])

  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

至于useCallback：

它可能也有效

const throttled = useCallback(throttle(newValue => console.log(newValue),[]);

但是如果我们尝试在值改变后重新创建回调：

const throttled = useCallback(throttle(() => console.log(value),[value]);

我们可能会发现它不会延迟执行：一旦值被更改,就会立即重新创建并执行回调.

所以我看到useCallback在延迟运行的情况下并没有提供显着的优势.由你决定.

[UPD]最初是

const throttled = useRef(throttle(() => console.log(value),1000))

  useEffect(throttled.current,[value])

但是那种方式throttled.current通过闭包绑定到初始值(0).所以即使在下一次渲染中它也从未改变过.

因为闭包功能将函数推入useRef时要小心.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!