Reactjs React中分离有状态和无状态组件的行应该在哪里？

尽可能多地使用无状态组件，并让有状态的父组件管理它们。 我知道这可以使无状态组件更易于重用和管理。 然而，到了极致，我们总是可以将状态放在顶级组件上，比如App.js，并通过一条长长的道具链传递信息和回调。如果使用Flux，操作也可以在其中调度（通过回调执行）

所以我想知道什么是区分有状态和无状态组件的方法？如果使用Flux，应该在哪里调度操作

---添加一个示例---

比如说，我有一个类似谷歌文档的web应用程序，它有一个工具栏和显示的内容。我想我们将拥有组件结构

<App>
    <Toolbar />
    <Content />
</App>

工具栏上的按钮会影响显示内容，例如粗体文本按钮

那么，应用程序是应该将按钮按下的回调道具传递给工具栏并自行分派操作，还是应该让工具栏自行执行

应用程序应该将contentString道具传递给内容，还是让内容本身监听存储更改

---

谢谢

在我看来，一个简单的应用程序可以这样使用通量模式：

孩子们发出动作

应用程序侦听存储并将处理后的数据传播给他的孩子

通过这种方法，您可以使用无状态组件，但代码组织良好，没有回调道具。但这两个命题都是正确的，这是您根据应用程序的大小和需求做出的决定

---

如果您构建的组件将在您的应用程序之外使用，那么不要尽可能多地使用flux，让开发人员根据自己的需要选择所需的方法。

这是一个好问题，即使在不同的flux实现之间，解决方法也有所不同

我更喜欢将我的状态放在一个高级组件中，它可以看到“big picrure”，并使用道具将数据传播到所有低级组件。在一个好的React应用程序中，大多数组件都不应该“关心”数据来自哪里。 到目前为止，拥有一个好的结构化模型而不是几个零碎的模型也证明了这一点。（顺便说一句，即使使用多个商店也可以实现，高级组件可以监听所有的声音，并且实际上“保存”了这个大模型）

关于操作-我更喜欢让我所有的“哑”可视化/ui/display组件与回调道具一起工作。这样就更容易重复使用它们，并且可以很好地分离关注点。 在包含一点业务逻辑的更丰富组件中，我直接调用回流操作。通常，这些组件本身也是上述“哑”ui控制器的容器组件

所以，底线是——数据应该尽可能地从高层流动，操作可以从较低的组件启动，但始终要检查是否可以使用回调道具实现相同的结果

对于您的问题-工具栏是一个足够复杂的组件，它有自己的工具栏操作并直接调用它们。但是内容组件肯定应该从上面获取数据。当应用程序变得复杂时，也更容易以这种方式对数据流进行推理

希望有帮助。整个通量仍然是一门艺术在进行中