Reactjs 每5秒仅保存WebSocket消息中的数据一次

我有一个简单的React组件，我在

useffect

hook中订阅WebSocket消息：

  useEffect(() => {
    ws.onmessage = (response) => {
      const stream = JSON.parse(response.data)
      updateState([...stream ])
    }

    return () => ws.close()
  }, [])

---

这很好：我从WebSocket接收数据并将其设置为state。但我的问题是，我收到的消息实在太多了（比我实际需要的要多），我想将其限制为每5秒一次状态更改。似乎我不能在这里使用setTimeout或Lodash去盎司/节流（或者我找不到如何使用）。有什么方法可以做到这一点吗？

您可以限制

onmessage

句柄，使其每5秒只允许一次更新：

useEffect(() => {
  ws.onmessage = .throttle((response) => {
    const stream = JSON.parse(response.data)
    updateState([...stream])
  }, 5000, { leading: true })

  return () => ws.close()
}, [])

---

注意：在这里使用油门更合适。这意味着每5秒钟，就会应用一次更改。如果使用debounce，且更新速度太快，则在事件停止一段时间之前不会应用更新。

您可以限制

onmessage

句柄，使其每5秒只允许一次更新：

useEffect(() => {
  ws.onmessage = .throttle((response) => {
    const stream = JSON.parse(response.data)
    updateState([...stream])
  }, 5000, { leading: true })

  return () => ws.close()
}, [])

注意：在这里使用油门更合适。这意味着每5秒钟，就会应用一次更改。如果使用debounce，并且更新速度太快，则在事件停止一段时间之前不会应用更新