IT技术 - React.js 油门 mousemove 事件不断抛出 event.persist() 错误 - 吾爱随笔录

我需要限制 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)
  }
}

如果您将 mousemove 保持在上tool__body，它会收到很多以下警告：

警告：出于性能原因重用此合成事件。如果您看到这一点，则表示您正在访问已screenX发布/无效的合成事件上的属性。这被设置为空。如果您必须保留原始合成事件，请使用 event.persist()。有关更多信息，请参阅 fb.me/react-event-pooling。

我的react版本：“15.0.2”

好像效果e.persist()不太好。任何的想法？:D

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'))

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