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，它會得到很多下面的警告：

警告：這個S-由於性能原因重新使用合成事件。如果你看到這個，你正在發佈/無效的合成事件中訪問屬性screenX。這被設置爲空。如果您必須保留原始合成事件，請使用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，並建立實際處理一個已經節流事件的第二種方法。