javascript - 在React中使用setState每帧更新一次Dom

我在mousemove中有一个componentDidMount事件，我想每帧只调用一次setState()以更新DOM。
怎么做？

最佳答案

不知道“每帧一次”是什么意思，但是我可以想象您不想在鼠标移动的每个像素上重新渲染。

您可以做的是将时间戳记和/或鼠标位置保存在状态中，并且仅在发生超过x次或超过x像素的鼠标移动时才使用setState。像这样：

onMouseMove(mouseX, mouseY) {
  // check if more than 1 second has elapsed or if mouse has moved more than 10 pixels
  let timestamp = Date.now()
  if (
    (timestamp - this.state.now > 1000) ||
    (Math.abs(mouseX - this.state.mouseX) > 10) ||
    (Math.abs(mouseY - this.state.mouseY) > 10) {
    // store the new timestamp + mouse position in state, which will trigger re-render
    this.setState({
      now: timestamp,
      mouseX: mouseX,
      mouseY: mouseY
    })
  }
}