除了使用flux / redux体系结构,React组件应如何与服务进行通信?
例如: 有一个容器,只有很少的代表性(反应)组件:
将它们视为资源表示形式,我希望它们中的每一个都能单独访问Microservice API(获取或更新数据)。这样对吗?它将提供干净的责任管理模型,但是使用http请求加载每个组件的内容会给性能带来疑问
这个问题还涉及:如何为多个(微)服务执行有效的通信?
当您 选择不使用Flux / Redux时 ,请执行以下操作:
创建一个应该包装所有其他组件的 外部 组件。该组件也称为 高级组件 或 控制器视图 。该组件应使用HTTP库与您的微服务通信(我个人很喜欢Axios)。我建议您创建一个包装Axios的客户端API对象。您的高阶组件可以引用此客户端API,因此与HTTP库无关。我还要把这个客户端API的参考的window对象dev模式,所以你可以做window.clientApi.fetchSomething()的Chrome console,使调试更加方便。
window
dev
window.clientApi.fetchSomething()
Chrome console
使所有其他组件(ChatBox,AvatarBox和NewsStream) 受到控制 。如果您不熟悉此概念,则表示他们通过 道具 获得了他们所需的一切,并且避免保持状态。这些组件不应调用微服务本身。这是高阶组件的责任。为了进行交互,这些组件应将 事件处理程序 作为道具接收。
这样对吗?它将提供干净的责任管理模型,但是使用http请求加载每个组件的内容会给性能带来疑问
通过 不允许每个组件直接与微服务联系, 可以避免性能问题。如果您的高阶组件编译了所有需要的信息,并进行了尽可能少的HTTP调用,那么使用这种方法应该会很好。
通常建议使用Flux / Redux,但是如果您选择退出,这就是解决方法。