の定義は、私が思っていたReact.js

Question

の属性定義のこれら二つの方法の間に違いがあるコンポーネント属性が反応している：

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番目の例では、コンポーネントが再レンダリングされるたびに属性が再作成されていますが、最初は1回だけ作成されるため、最初の方法が優先されるはずです。

質問には2つの違いがありますか？

Answer 1

2つの違いは以下の通りである：

最初のインスタンス化とコンポーネントの各インスタンス間で共有されるコンポーネントが宣言された時、に単一EventSourceを設定します。

一方、2番目のメソッドは、コールバックが起動されたときにコンポーネントのインスタンスごとに別々のEventSourceを作成します。

コンポーネントの複数のインスタンスを互いに独立させたいとすると、2番目のオプションは必要なものだと思います。

ちなみに、componentDidMountコールバックは通常、コンポーネントが最初にマウントされたときに、コンポーネントのライフサイクルで1回だけ実行されるため、再レンダリングとは関係ありません。