React - 组件/容器：一个视图，多个操作？

Question

我会尽量简洁：我有一个过滤器视图（容器），它结合了像网格组件这样的愚蠢组件和结果，以及一个带有一些字段和操作（如提交）的表单组件。在这种情况下，存在一些疑问： - 如果我有一个组件（例如下拉菜单），它有自己的数据（一些东西的列表），它应该负责获取自己的数据还是应该委托给它的智能父级（过滤视图）？ - 这个智能过滤视图有许多愚蠢的组件需要处理，所以，它是否负责传播这些组件所需的所有操作（例如：handleSearchClick、handleGridRowClick 等）？

如果是这样，那应该是最终的结构：

• 过滤视图（智能）
  • 表单（愚蠢，从 FilterView 收到回调操作）
    • TextField（哑）
    • CustomerDropDown（智能？还是应该 FilterView 向它发送数据？）
  • 网格（哑，从 FilterView 接收回调操作）

我希望我已经很好地解释了我的意思。

提前致谢。

Answer 1

蓬松的问题得到蓬松的答案。

对于如何找到智能/转储组件的最佳位置并没有真正的共识。有大量关于它的博客文章，甚至 React 文档对这个概念也很模糊。假设您使用像 Redux 这样的东西，我会说，不要害怕连接您的“更深”的组件。尝试使用更简单、更简洁的代码，这些代码易于查看和推理，而不是在这里遵循一些精确的科学。

在我当前的项目中，我们之前是否遵循“自上而下传递所有数据”，现在我们已切换到将较低组件直接连接到需要它们的商店和操作。这感觉好多了，对我们来说效果很好。 其他人在 Redux 存储库的 Recommended usage of connect() 问题中很好地描述了我们的问题以及我们切换的原因。

使用 Redux 和它的连接组件，更频繁地连接到状态没有实际成本，所以基本上这完全取决于您和您的遗产。

即使您不使用 Redux，我相信这些博客文章和问题也可以帮助您。

良好的阅读提示： Recommended usage of connect() #419

Abramov´s Smart and Dumb components blog post