2016-11-10 57 views
0

我想知道定義屬性是有定義的這兩種方式有什麼區別陣營組件的屬性:在React.js

var something = React.createClass({ 
    SSEStream: new EventSource("/stream/"), 

    componentDidMount: function() {                
     this.SSEStream.addEventListener("message", function(msg) {       
      // do something 
    }.bind(this)); 
}); 

var something = React.createClass({ 
    componentDidMount: function() { 
     this.SSEStream = new EventSource("/stream/"); 

     this.SSEStream.addEventListener("message", function(msg) { 
      // do something 
     }.bind(this)); 
    }                 
}); 

注意的是如何做出反應組件屬性SSEStream定義的差異。我的猜測是,在第二個示例中,每次重新呈現組件時都會重新創建屬性,而在第一個示例中,僅創建一次屬性,因此應首選第一種方式。

所以問題是,兩者之間會有絲毫的區別嗎?

回答

2

兩者之間的區別如下:

第一實例化,並設置一個單一EventSource在組件被聲明的時間,其在組件的每個實例之間共享。

另一方面,當觸發回調時,第二個爲組件的每個實例創建一個單獨的EventSource

假設你希望組件的多個實例互相獨立,那麼我猜想第二個選項就是你想要的。

順便說一下,componentDidMount回調通常只在組件的生命週期中運行一次,因爲組件的第一次掛載時,這與重新呈現無關。

+1

非常好的答案,現在很清楚。謝謝! –