React.js throttle mousemove事件继续抛出event.persist()错误

Question

我需要限制mousemove事件,我按照下面的提示构建方法,但不起作用: 在React.js中执行debounce

这是我的代码(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,它会发出很多警告:

警告:出于性能原因,将重复使用此合成事件.如果您看到这个,那么您将screenX在已发布/无效的合成事件上访问该属性.这被设置为null.如果必须保留原始合成事件,请使用event.persist().有关更多信息,请参见fb.me/react-event-pooling.

我的反应版本:"15.0.2"

似乎e.persist()效果不好.任何的想法？:d

Answer 1

e.persist需要与事件同步调用,处理程序可以异步调用.这是一个修复:

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>
  );
};