React 组件必须在层次结构中吗？

Question

一直有人告诉我，React 组件应该设计成树状层次结构，以便祖先/父母可以持有状态并将其传递给他们的孩子。

我只是想知道，这是必须的吗？

React 的设计原则是 “React 从一开始就是为逐步采用而设计的，您可以根据需要使用尽可能少或尽可能多的 React。” 我只是想如果我有一个现有的项目，我想在这里和那里分别添加一些 React 组件而不修改大部分现有的 HTML/代码？这些组件还能相互通信吗？

例如，假设我想在现有纯 HTML 页面的不同位置添加两个单独的 React 组件，我真的很喜欢现有的 HTML 是非 Javascript 生成/修改的。这两个组件彼此之间没有任何层次结构。他们仍然可以访问彼此的状态吗？如果一个组件被更新（通过用户点击、AJAX 响应等），该组件是否可以通知另一个组件更新自己或告诉它调用函数？

我还没有尝试过任何事情，但我会想如果我真的要执行上述操作，如果没有其他方法，我会使用全局变量/函数作为最后的手段。但是，我更感兴趣的是学习任何 React 约定/方法/最佳实践来实现上述目标。

Answer 1

如果您必须共享状态（至少仅使用 React），您必须将这些组件包装在一个上下文中，然后使用 Portal 在这些单独的地方渲染它们。我很确定这是可行的，尽管它并不能真正回答您的问题，在这种情况下，这两个组件将是具有共同父级上下文提供者的兄弟姐妹。

更合理的解决方案是使用例如Redux 或类似的解决方案。您将拥有一个商店，然后您只需为要安装在页面某处的每个组件调用ReactDOM.render 多次即可。这些组件中的每一个都必须是商店提供者（也是一个组件）的子组件，然后这些组件将能够通过商店进行通信。

Answer 2

从广义上讲，您所描述的是event-driven programming，它绝对可以工作。在 Javascript 域中搜索相关先前工作的一些关键字是 "javascript event bus" 和 "javascript pub sub"。

事件驱动编程在 jQuery 时代风靡一时，近年来在前端世界中有些失宠，但这并不意味着你不能使用它。请注意，虽然事件驱动编程肯定有优势，但也存在许多难题：异步流、在侦听器准备好之前触发的事件、一致的状态等。上面提供的链接包含有关这些问题的更多信息也是。

您描述的架构是逐步采用 React 的一种方法，它是一种有效的解决方案，您只需要注意权衡。根据您的用例，这些权衡可能有意义，也可能没有意义。从本质上讲，React 的设计原则与事件驱动架构有些不一致，所以我个人建议不要这样做。 Paolostyle's answer 是一个很好的替代解决方案示例，它允许您逐步采用，同时仍然遵循 React 自己的原则。