小编典典

在React组件和服务之间进行通信的最佳实践是什么?

reactjs

除了使用flux / redux体系结构,React组件应如何与服务进行通信?

例如: 有一个容器,只有很少的代表性(反应)组件:

  1. ChatBox-启用读/写消息
  2. 带有密码更改器的AvatarBox-可更改用户密码
  3. 新闻流-列出新闻并对其应用过滤器

将它们视为资源表示形式,我希望它们中的每一个都能单独访问Microservice
API(获取或更新数据)。这样对吗?它将提供干净的责任管理模型,但是使用http请求加载每个组件的内容会给性能带来疑问

这个问题还涉及:如何为多个(微)服务执行有效的通信?


阅读 270

收藏
2020-07-22

共1个答案

小编典典

当您 选择不使用Flux / Redux时 ,请执行以下操作:

创建一个应该包装所有其他组件的 外部 组件。该组件也称为 高级组件控制器视图
。该组件应使用HTTP库与您的微服务通信(我个人很喜欢Axios)。我建议您创建一个包装Axios的客户端API对象。您的高阶组件可以引用此客户端API,因此与HTTP库无关。我还要把这个客户端API的参考的window对象dev模式,所以你可以做window.clientApi.fetchSomething()Chrome console,使调试更加方便。

使所有其他组件(ChatBox,AvatarBox和NewsStream) 受到控制 。如果您不熟悉此概念,则表示他们通过 道具
获得了他们所需的一切,并且避免保持状态。这些组件不应调用微服务本身。这是高阶组件的责任。为了进行交互,这些组件应将 事件处理程序 作为道具接收。

这样对吗?它将提供干净的责任管理模型,但是使用http请求加载每个组件的内容会给性能带来疑问

通过 不允许每个组件直接与微服务联系,
可以避免性能问题。如果您的高阶组件编译了所有需要的信息,并进行了尽可能少的HTTP调用,那么使用这种方法应该会很好。

通常建议使用Flux / Redux,但是如果您选择退出,这就是解决方法。

2020-07-22