reactjs - React - 组件/容器 : One view, 多个操作？

Question

我会尽量简洁:我有一个过滤器 View (容器)，它将诸如网格组件之类的dumb组件与结果结合在一起，以及一个带有一些字段和操作(例如提交)的表单组件。在此背景下，存在一些疑问:- 如果我有一个组件(例如下拉列表)有自己的数据(某项列表)，它是否应该负责获取自己的数据，或者应该委托(delegate)给其智能父级(过滤器 View )？- 这个智能筛选 View 有许多愚蠢的组件需要处理，那么它是否负责传播这些组件所需的所有操作(例如:handleSearchClick、handleGridRowClick 等)？

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

• FilterView(智能)
  • 表单(哑，具有从 FilterView 接收的回调操作)
    • 文本字段(哑)
    • CustomerDropDown(智能？还是 FilterView 应该向其发送数据？)
  • 网格(哑，具有从 FilterView 接收的回调操作)

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

提前致谢。

Answer 1

模糊的问题会得到模糊的答案。

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

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

使用 Redux 及其连接组件，更频繁地连接到状态并没有实际成本，因此基本上这一切都取决于您和您的遗产。

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

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

Abramov´s Smart and Dumb components blog post