如何触发反应，用套接字重新渲染UI？

问题描述：

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

不过，我很担心这样的代码，很可能引入内存泄漏，因为旧的客舱部分将仍然由插座refered。

我试图把它变成：

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

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

但是第二码犯规触发HTML被重新描绘，即使当我使用断点，电话，store.getState()插座收到消息后的结果变化。

答

您可以覆盖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结合。所以，你可能想要回顾一下。也许转换为高阶组件？

如何触发反应，用套接字重新渲染UI？

相关推荐