Javascript 如何在React/Redux应用程序中定位应用程序引导逻辑

加载web应用程序时，我希望与服务器建立WebSocket连接

这是一个异步引导活动

创建一个更高阶的组件，使用包装组件（应用！）的条件呈现来“阻止”直到建立WebSocket连接，这会是惯用做法吗

// containers/App/index.js
export default withWebSocketConnection(app)


// components/WebSocketConnection/index.js
function withWebSocketConnection(wrappedComponent) {
  class AppWithWebSocketConnection extends React.Component {
    constructor(props) {
      super(props);
    }

    componentWillMount() {
      // set this.props.isConnecting to be true
      websocket.connect().then(() => {
        // set this.props.isConnecting to be false
      });
    }

    render() {
      return this.props.isConnecting ? <div>Connecting...</div> : <WrappedComponent {...this.props}/>
    }
  }
  return AppWithWebSocketConnection;
}

export default withWebSocketConnection;

//containers/App/index.js
使用WebSocketConnection导出默认值（应用程序）
//组件/WebSocketConnection/index.js
带有WebSocketConnection的函数（wrappedComponent）{
类AppWithWebSocketConnection扩展了React.Component{
建造师（道具）{
超级（道具）；
}
组件willmount（）{
//将this.props.isConnecting设置为true
websocket.connect（）。然后（（）=>{
//将this.props.isConnecting设置为false
});
}
render（）{
返回此.props.isConnecting？正在连接…：
}
}
返回AppWithWebSocketConnection；
}
使用WebSocketConnection导出默认值；

首先，您不能（和/或不应该）设置“this.props”。其次，在componentDidMount中执行所有websocket/api/异步调用。我通常要做的是，为连接状态设置一个

state

属性（标志）：

constructor（props）{super（props）；this.state={connected:false}；}

。正如@Nevosis所说，使用

componentDidMount

建立连接，成功后，相应地设置状态：

this.setState（{connected:true}）

。如果包装组件在没有WebSocket连接的上下文中没有意义，那么不呈现组件（在示例中基本上就是这样做的）是有意义的。如果包装组件可以/应该在没有建立连接的情况下工作，那么最好的选择是呈现它并将连接设置为道具。连接后，设置连接并重新启动组件。从您的示例来看，我想说您的

WrappedComponent

不太关心WebSocket，在这种情况下，我的第一个建议会更好。谢谢你们，为什么

组件的挂载不如（或错误）正确
componentDidMount
用于启动建立WebSocket连接的尝试？建议在中使用，因为通常情况下，在获取一些数据后，您会希望重新加载组件（例如，使用异步数据填充表）。这意味着调用
setState（）
，如果在
组件内部调用
setState（）
，它将被忽略。当然，这意味着异步方法比其他
组件的挂载速度更快