具有上下文

setInterval的回調我開始學習陣營框架，但實際上我期待從主站點的代碼，仍然無法理解具有上下文

tick: function() { 
    this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
    }, 
    componentDidMount: function() { 
    this.interval = setInterval(this.tick, 1000);

如果我通過this.tick到setInterval，那麼計時器時事件被引發在引擎蓋下，並調用this.tick，它應該可能在window對象的上下文中調用，對吧？如果這是真的，那麼tick函數中的代碼應該是錯誤的，因爲window對象上沒有setState函數。

full code

var Timer = React.createClass({ 
    getInitialState: function() { 
    return {secondsElapsed: 0}; 
    }, 
    tick: function() { 
    this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
    }, 
    componentDidMount: function() { 
    this.interval = setInterval(this.tick, 1000); 
    }, 
    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 
    render: function() { 
    return React.DOM.div({}, 
     'Seconds Elapsed: ', this.state.secondsElapsed 
    ); 
    } 
}); 

React.renderComponent(Timer({}), mountNode);

來源

2014-01-26 Krab

陣營在組件規範中定義autobinds方法，因爲這幾乎總是你想要什麼。看到這個博客帖子獲取更多詳情：

http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html

來源

2014-01-26 23:57:44

奇怪。雖然在像setInterval（）這樣的例子中很方便，但這不是方法調用的正常形式，所以它似乎在EVERY方法調用時創建了一個額外的函數調用開銷，因爲它試圖再次重新附加正確的'this'如果它已經連接。我不認爲我想要我的框架重新定義這樣的JavaScript基礎知識。 – jfriend00

我同意這有點奇怪。事實證明，實際上您可能定義的所有方法都是事件處理程序或其他方法，例如默認情況下在全局上下文中執行該函數的示例。我個人對這種行爲有些t but，但我幾乎喜歡React的其餘部分 - 如果你還沒有，我鼓勵你檢查一下。 –

回答

相關問題