React.js 油門 mousemove 事件不斷拋出 event.persist() 錯誤

Question

我需要限制 mousemove 事件，我按照下面的提示構建方法，但不起作用： 在 React.js 中執行去抖動

這是我的代碼（ http://jsbin.com/binesofepo/edit?js,console,output ）：

class Tool extends Component {
  constructor(props) {
    super(props);
    this._onMouseMove = _.throttle(this._onMouseMove.bind(this), 1000)
  }

  render() {    
    return (

      <div ref="tool" className="tool">
        <div ref="toolBody"
             className="tool__body"
             onMouseMove={this._onMouseMove}></div>
      </div>
    )
  }
  _onMouseMove(e) {
    e.persist()
    console.log(e.screenX)
  }
}

如果你在tool__body上保持 mousemove ，它會得到很多以下警告：

警告：出於性能原因重用此合成事件。 如果您看到這一點，則表示您正在訪問已發布/無效的合成事件上的屬性screenX 。 這被設置為空。 如果您必須保留原始合成事件，請使用 event.persist()。 有關更多信息，請參閱 fb.me/react-event-pooling。

我的反應版本：“15.0.2”

似乎e.persist()效果不佳。 有什么想法嗎？ :D

Answer 1

e.persist 需要和事件同步調用，可以異步調用handler。 這是一個修復：

class Tool extends React.Component {
  constructor(props) {
    super(props);
    this._throttledMouseMove = _.throttle(this._throttledMouseMove.bind(this), 2000);
  }

  _throttledMouseMove = (e) => {
    console.log(e.screenX);
  }

  render() {    
    return (
      <div ref="tool" className="tool">
        <div ref="toolBody"
             className="tool__body"
             onMouseMove={this._onMouseMove}>
        </div>
      </div>
    )
  }

  _onMouseMove = (e) => {
    e.persist();
    this._throttledMouseMove(e);

  }
}
ReactDOM.render(<Tool/>, document.querySelector('.main'))

相關的變化是直接從事件調用 _onMouseMove，並設置第二個方法來實際處理被限制的事件。

Answer 2

帶鈎子：

const Tool = () => {
  const onMouseMove = useMemo(() => {
    const throttled = _.throttle(e => console.log(e.screenX), 300);
    return e => {
      e.persist();
      return throttled(e);
    };
  }, []);
  return (
    <div className="tool">
      <div className="tool__body" onMouseMove={onMouseMove}>
        Content
      </div>
    </div>
  );
};