Question

我在render（）中有这个代码，它打开一个websocket并连接到Rest服务。

return (
      <div className="App">  

        <SockJsClient 
          url = 'http://localhost:8610/refresh/'
          topics={['/topic/notification']} 
          onConnect={console.log("Connection established!")} 
          onDisconnect={console.log("Disconnected!")}
          onMessage={(msg) => this.update()}
          debug= {true}
        />

一切正常 - 这种方法的唯一问题是，当重新呈现UI时，应用程序关闭websocket并再次重新打开它。没有什么打破，应用程序只是恢复，没有任何反应。

此操作是否非常耗费资源？有没有办法告诉不要重新渲染那部分代码？我应该担心吗？

this.update()在state。

中重新设置了一个数组

我知道shouldComponentUpdate()是我需要的，但是我必须创建一个重新渲染的新组件，对吧？我很困惑。

谢谢！

编辑：这也有效（@ zavjs的解决方案更清洁）

componentDidMount(){

  var self = this; // use self to reference this

  var socket = new SockJS("http://192.168.1.139:8610/refresh");
  var stompClient = Stomp.over(socket);
  stompClient.connect({}, function(frame,) {
    console.log('connected: ' + frame);
    stompClient.subscribe('/topic/notification', function(notification) {
      self.update();  // here
    })
  }, function(err) {
    console.log('err', err);
  });

此外here's更多关于此事！

Answer 1

是的，我创建了一个中间组件，包裹你的SocketJSClient，并且只要你有意想让重新渲染发生时就调整shouldComponentUpdate（也许当像url这样的Socket配置发生了变化而你需要例如，传递下来。

class PreventUpdate extends React.Component {
  shouldComponentUpdate = (nextProps) => {
    //set true if a Socket connection config has changed
    //or something that needs to trigger a re-render in the 
    //child component 
    if(this.nextProps.shouldPreventUpdate) {
      return false;
    }
  };

  render() {
    this.props.children;
  }
}

现在你可以这样做：

<PreventUpdate
  shouldPreventUpdate={someDynamicCondition}>
  <SocketJSClient />
<PreventUpdate/>

使用此方法，您可以传入任意标志以防止更新组件及其所有子组件。我希望它很适合你

停止React从呈现打开websockets的代码

1 个答案: