javascript - 如何管理独立 react 组件之间的通信？

Question

我想实现一个类似于messenger.com的Web应用程序，也基于react框架。我的问题是管理列表和内容组件之间的通信，因为它们彼此无关。它们的父组件的 render 方法如下所示:

返回(“<”列表“/>”"<"内容"/>")

我希望内容组件根据所选列表元素刷新并加载一些数据，类似于messenger.com。 Here's simple mockup

我已经阅读了很多有关 redux 的内容，但我根本无法想象在这种情况下应该如何实现它。

这也是我在浏览器端运行的整个 react 脚本:http://pastebin.com/ua928BEc

抱歉，如果这是一个菜鸟问题，我只是从 react 开始:)

非常感谢您阅读本文，

沃伊泰克

Answer 1

Thinking in React是一个很好的教程，解释了 React 中的状态所有权以及组件如何通信。一旦您熟悉了它，您就可以尝试在 vanilla React 中实现它。

当您熟悉 React 但注意到某些组件由于所有状态处理逻辑而变得臃肿时，您可能需要查看像 Redux 这样的 Flux 实现来将状态处理卸载给它。 Getting Started with Redux是一组使用 Redux 和 React 的免费介绍视频，官方 basics tutorial 对它们进行了很好的补充。 .

但是don’t rush into Flux or Redux until you understand React .