どのように反応して、UIをソケットと再レンダリングするのか？

Question

これは私の作業コードです：

import socket from 'components/io/socket'; 
import store from 'components/store'; 
// globally available socket connection 
class ChatBox extends React.Component { 
    componentDidMount(){ 
    socket.on("message", this.props.addChat.bind(this)); 
    // this.props.addChat is reduxer actions. 
    } 
} 

は、しかし、私は古いChatBoxコンポーネントがまだソケットによって参照されることになるので、このようなコードは、おそらくメモリリークを導入することを心配しています。

私にそれを変更しようとした：第二のコードがあっても、私はブレークポイントを使用する場合も、再レンダリングするHTMLをトリガ、呼doesntのがソケットがメッセージを受信した後、

import socket from 'components/io/socket'; 
import store from 'components/store'; 
socket.on("message", store.dispatch(addChat({...})) 

class ChatBox extends React.Component { 
    render(){ ... } 
} 

store.getState()結果の変化を。

Answer 1

componentWillUnmmountを無効にすることで、リスナーの登録を解除して、あなたが心配しているチャットボックスへの参照をソケットから解放することができます。

ただし、bindを呼び出すたびに新しいインスタンスが作成されるため、componentWillUnmmountにリスナー参照はありません。これを解決するには、コンストラクタでメソッドをバインドします。

constructor(props) { 
    super(props); 

    this.addChat = this.props.addChat.bind(this); 
} 

componentDidMount() { 
    socket.on("message", this.addChat); 
} 

componentWillUnmount() { 
    socket.off("message", this.addChat); // or whatever it is called 
} 

とにかく、コンポーネントにバインド（propsによって外部から渡された）余分なメソッドを持っている私には奇妙に思えます。通常、コンポーネント自体のメソッドをサブスクライブするので、何が起こっているかを確認することができます。たとえば、メソッドがインスタンスの任意のプロパティ（状態やイベントなど）をaddChatバインディングで自由に変更できるためです。だから、これを見直したいかもしれない。おそらく高次のコンポーネントに変換しますか？