Wie man reagiert, um die Benutzeroberfläche neu zu rendern, mit Socket?

Question

das ist mein Arbeitscode jedoch

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. 
    } 
} 

, ich mache mir Sorgen, dass ein solcher Code, würde wahrscheinlich ein Speicherleck einführen, da die ältere Chatbox Komponente noch von der Steckdose refered würde.

Ich versuchte, es in sich ändern:

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

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

jedoch der zweite Code den HTML auslösen tut erneut gerendert werden, obwohl, wenn ich den Breakpoint verwenden, und fordert, store.getState() das Ergebnis ändern, nachdem die Buchse empfangene Nachricht .

Answer 1

Sie können componentWillUnmmount überschreiben, um den Listener abzubestellen und damit den Socket den Verweis auf die ChatBox freizugeben, über die Sie sich Sorgen machen.

Da jedoch bei jedem Aufruf von bind eine neue Instanz erstellt wird, ist die Listener-Referenz nicht unter componentWillUnmmount verfügbar. Um dies zu lösen, binden Sie die Methode im Konstruktor.

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 
} 

Wie auch immer, es scheint mir seltsam ein Fremd Methode zu haben (geleitet von außen durch props) an die Komponente gebunden. Normalerweise abonniert man eine Methode der Komponente selbst, so dass man sich sicher sein kann, was gerade passiert - insbesondere weil die Methode beliebige Eigenschaften der Instanz, wie Zustand oder Ereignis, die addChat-Bindung frei ändern kann. Vielleicht möchten Sie dies überprüfen. Vielleicht zu einer hochwertigen Komponente konvertieren?