如何管理独立反应组件之间的通信?
How to manage communication between to independent react components?
我想实现一个类似于 messenger.com 的网络应用程序,也是基于 React 框架。我的问题是管理 List 和 Content 组件之间的通信,因为它们彼此无关。他们的父组件的渲染方法是这样的:
return (
“<”列表“/>”
“<"Content "/>”
)
我希望内容组件根据选定的列表元素刷新和加载一些数据,类似于 messenger.com。 Here's simple mockup
我已经阅读了很多关于 redux 的内容,但我无法想象在这种情况下应该如何实现它。
这也是我在浏览器端的整个反应脚本运行:http://pastebin.com/ua928BEc
对不起大家,如果这是一个菜鸟问题,我只是从反应开始:)
非常感谢阅读本文,
沃伊泰克
为了用flux架构解决这个问题
由于您使用的是列表和内容,因此选择您所拥有的列表项将调用一个操作(获取此列表的内容),该操作将被调度,并为商店提供内容中需要的值。
如果您需要组件之间的进一步通信,您可以为列表/内容组件提供一些道具。
如果系统很简单,使用全局消息系统,例如 pub/sub 或信号:PubSubJS,https://github.com/Hypercubed/mini-signals , http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/
如果您的应用程序更复杂,请考虑使用 flux 实现(flux、redux...)。您将 UI 组件连接到通量存储。您更新商店中的状态,组件将自动重新呈现。
Thinking in React 是一个很好的教程,解释了 React 中的状态所有权以及组件如何通信。一旦你适应了它,你可以尝试在 vanilla React 中实现它。
当您对 React 感到满意但注意到您的某些组件由于所有状态处理逻辑而变得臃肿时,您可能想要检查像 Redux 这样的 Flux 实现以将状态处理卸载给它。 Getting Started with Redux is a set of free introductory videos to using Redux with React, and they are complemented well by the official basics tutorial.
我想实现一个类似于 messenger.com 的网络应用程序,也是基于 React 框架。我的问题是管理 List 和 Content 组件之间的通信,因为它们彼此无关。他们的父组件的渲染方法是这样的:
return ( “<”列表“/>” “<"Content "/>” )
我希望内容组件根据选定的列表元素刷新和加载一些数据,类似于 messenger.com。 Here's simple mockup
我已经阅读了很多关于 redux 的内容,但我无法想象在这种情况下应该如何实现它。
这也是我在浏览器端的整个反应脚本运行:http://pastebin.com/ua928BEc
对不起大家,如果这是一个菜鸟问题,我只是从反应开始:)
非常感谢阅读本文,
沃伊泰克
为了用flux架构解决这个问题
由于您使用的是列表和内容,因此选择您所拥有的列表项将调用一个操作(获取此列表的内容),该操作将被调度,并为商店提供内容中需要的值。
如果您需要组件之间的进一步通信,您可以为列表/内容组件提供一些道具。
如果系统很简单,使用全局消息系统,例如 pub/sub 或信号:PubSubJS,https://github.com/Hypercubed/mini-signals , http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/
如果您的应用程序更复杂,请考虑使用 flux 实现(flux、redux...)。您将 UI 组件连接到通量存储。您更新商店中的状态,组件将自动重新呈现。
Thinking in React 是一个很好的教程,解释了 React 中的状态所有权以及组件如何通信。一旦你适应了它,你可以尝试在 vanilla React 中实现它。
当您对 React 感到满意但注意到您的某些组件由于所有状态处理逻辑而变得臃肿时,您可能想要检查像 Redux 这样的 Flux 实现以将状态处理卸载给它。 Getting Started with Redux is a set of free introductory videos to using Redux with React, and they are complemented well by the official basics tutorial.