javascript - react : Batching state updates tied to event listeners

Question

我有一个带有“mouseover”和“mouseout”事件监听器的组件。几个相同的组件在浏览器中彼此相邻(或重叠)渲染，因此可以按顺序触发“鼠标悬停”、“鼠标悬停”，然后触发另一个“鼠标悬停”事件(如果您将鼠标悬停在从一个元素到下一个元素)。

该组件在所有这些实例中设置状态，但我想知道是否没有更有效的方法来解决此问题，以避免三个状态更新相继发生。

我是否试图在这里进行不必要的优化，或者这是一个合理的担忧吗？这是我的意思的一个例子。在本例中，我只是更新计数，但假设我正在做一些更昂贵的事情，例如迭代数组。

(免责声明，我没有在此处使用新的代码插入，并且在运行此代码段时遇到问题)。

import React, { Component } from 'react';

class DummyComponent extends Component {
  state = {
    someProp: 1
  };
  
  componentDidMount() {
    this.addEventListener('mouseover', this.handleEvent);
    this.addEventListener('mouseout', this.handleEvent);
  }
  
  componentWillUnmount() {
    this.removeEventListener('mouseover', this.handleEvent);
    this.removeEventListener('mouseout', this.handleEvent);
  }
  
  handleEvent(event) {
    console.log(event.type);
    this.setState({ someProp: this.state.someProp += 1 });
  };
  
  render() {
    return (
      <section>
        {this.state.someProp}
      </section>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

是否有必要立即处理该事件？如果不是，这似乎是一个很好的用例，用于消除处理程序方法的抖动，以便它的调用频率不会超过 X 毫秒(例如 100 毫秒)。这样做的缺点是处理程序在第一次触发之前将至少等待那么长时间。

Lodash 库提供 debounce 的实现.

以下是如何修改您的代码以使用它:

import React, { Component } from 'react';
import _ from 'lodash';

class DummyComponent extends Component {
  state = {
    someProp: 1
  };

  componentDidMount() {
    this.addEventListener('mouseover', this.debouncedHandleEvent);
    this.addEventListener('mouseout', this.debouncedHandleEvent);
  }

  componentWillUnmount() {
    this.removeEventListener('mouseover', this.debouncedHandleEvent);
    this.removeEventListener('mouseout', this.debouncedHandleEvent);
  }

  handleEvent(event) {
    console.log(event.type);
    this.setState({ someProp: this.state.someProp += 1 });
  };

  // Debounced handler with a wait time of 100ms
  debouncedHandleEvent = _.debounce(handleEvent, 100)

  render() {
    return (
      <section>
        {this.state.someProp}
      </section>
    )
  }
}