reactjs - React 中区分有状态组件和无状态组件的界线应该在哪里？

Question

react encourages尽可能使用无状态组件，并让有状态父组件管理它们。我知道这可以使无状态组件更加可重用，并且易于管理。然而，在极端情况下，我们总是可以将状态放在顶级组件(例如 App.js)中，并通过长的 props 链向下传递信息和回调。如果使用 Flux，操作也可以始终在其中分派(dispatch)(通过回调执行)。

所以我想知道如何区分有状态和无状态组件？如果使用 Flux，应该将 Actions 分派(dispatch)到哪里？

--- 添加示例 ---

假设我有一个类似网络应用程序的谷歌文档，它有一个工具栏并显示内容。我想我们会有组件结构。

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

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

那么应用程序应该将 onButtonPressed 回调属性传递给 Toolbar 并自行调度 Actions，还是应该让 Toolbar 自己执行此操作？

应用程序应该将 contentString 属性传递给 Content，还是让 Content 本身监听 Store 的更改？

谢谢!

Answer 1

从我的角度来看，一个简单的应用程序可以以这种方式使用 Flux 模式:

1. children 发出 Action 。
2. 应用程序监听存储并将处理后的数据传播给其子级。

通过这种方法，您将拥有无状态组件，但具有良好的代码组织，无需回调属性。但您的两个主张也是正确的，这是您根据应用程序的大小和需求做出的决定。

如果您构建的组件将在应用程序外部使用，请尽可能不要使用 Flux，并让开发人员根据自己的需求选择所需的方法。