javascript - React.js 节流 mousemove 事件不断抛出 event.persist() 错误

Question

我需要限制 mousemove 事件，我按照下面的提示构建方法，但不起作用: Perform debounce in 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，它会得到很多下面的警告:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property screenX on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See fb.me/react-event-pooling for more information.

我的 react 版本:“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，并设置第二种方法来实际处理已被限制的事件。