サーバからプッシュされたイベントをリスニングするのに理想的な場所は何ですか？

Question

あなたはすべてがうまくやってくれることを願っています。私はちょうどサーバーからプッシュされたイベントを聞くのに理想的な場所であると知りたいのですが、私はsocket-ioで遊んでいて、サーバーがメッセージをプッシュするクライアントには、コードは

getInitialState:function(){ 
return {localstatemessages: ['hi'],remoteuserstatemessages:['hello']}}, 

render: function() { 
this.ListenEvents(); 
    var localusermsgs=this.state.localstatemessages.map(function(Message){ 
     return(
      <SendMessage Message={Message}/> 
     ) 
    }); 
    var recievedmsgs=this.state.remoteuserstatemessages.map(function(msg){ 
     return(
      <RecievedMessage Message={msg} /> 
     ) 
    }) 


    return (
     <div className="col-lg-8 col-md-8 col-xs-8 pull-right"> 
      <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       <div className="row"> 
        <div className="page-header"> 
         <div className="media"> 
          <div className="media-left"> 
           <img src={require("../_assets/_images/download.jpeg")} className="img-circle" alt="user image" /> 
          </div> 
          <div className="media-body"> 
           <h2 className="media-heading">peer user</h2> 
          </div> 
          <div className="media-right"></div> 
         </div> 

        </div> 
       </div> 
      </div> 

      <div className="chat_box"> 
       <RecievedMessage Message={this.state.remoteusermsg}/> 
       <SendMessage Message={this.state.usermsg}/> 

      </div> 
      <div className="msg_area"> 
       <div className="row"> 

        <div className="col-lg-12"> 
         <div className="input-group"> 
          <textarea type="text" cols="5" rows="2" onKeyDown={this.sendMessage} className="form-control" placeholder="Type here..."></textarea> 
          <span className="input-group-btn"> 
           <button className="btn btn-warning" type="button" onClick={this.sendMessage}>send</button> 
          </span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    ) 
}, 
sendMessage: function (event) { 
    if (event.keyCode == 13) { 

     let target = event.target; 
     var msg = target.value; 
     // alert('message is: ' + msg); 
     //event raising through ajax goes here 
     socket.emit('chat mssg',msg); 
     // alert('pushing msg '); 
     var newlocalmsg= this.state.localstatemessages; 
     newlocalmsg.push(msg); 
     this.setState({localstatemessages:newlocalmsg}); 
     target.value=''; 


    } 


}, 
handleRemoteMesssageUpdate:function(message){ 
    var remotemessages=this.state.remoteuserstatemessages; 
    remotemessages.push(message); 
    this.setState({remoteuserstatemessages:remotemessages}) 
}, 
ListenEvents:function(){ 
     socket.on('chat mssg',function (msg){ 
     // alert('pushing anothermsg'); 
     this.handleRemoteMesssageUpdate(msg); 
    }.bind(this)); 
} 

}です。

module.exportsは= ChatBox;ここ

状態remoteuserstatemessagesは、単一のプッシュイベントのために3回を更新し、私はここで何が起こっているか理解していない、機能が繰り返しListenEventsを呼び出してレンダリングしていますか？どのようにそれを行うことができますか？

Answer 1

this.ListenEvents()をrender()に入れてももちろん何度も呼び出されます。

ソケットを使用しているので、接続を一度正しく初期化するだけで済みます。だから、より良いあなたがcomponentWillMount()

componentWillMount(){ 
    this.ListenEvents() 
} 
render(){ 
    // render code 
} 

詳細についてでそれを呼び出すコンポーネントのライフサイクルに反応：https://facebook.github.io/react/docs/react-component.html