Reat -组件/容器:一个视图，多个操作？

Question

我将尽量精简:我有一个过滤器视图(Container)，它将诸如Grid组件这样的哑组件和结果组合在一起，还有一个表单组件包含一些字段和操作，比如submit。在这种情况下，存在一些疑问：-在我有一个组件(例如下拉列表)有自己的数据(列表)的情况下，它应该负责获取自己的数据还是应该委托它的智能父级(Filter )？-这个智能过滤器视图有许多哑组件需要注意，那么它是否负责传播这些组件所需要的所有操作(例如: handleSearchClick、handleGridRowClick等)？

如果是的话，这应该是最后的结构：

• FilterView (智能)
  • 表单(哑，带有从FilterView接收的回调操作)
    • TextField (哑巴)
    • CustomerDropDown (智能？或者FilterView应该向它发送数据？)

​

- Grid (dumb, with callback actions received from FilterView)

​

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

提前谢谢。

Answer 1

不确定的问题会得到不确定的答案。

对于如何为智能/转储组件找到最佳选择，还没有达成真正的共识。有大量的博客文章关于它，甚至反应文档是模糊的概念。假设您使用类似于Redux的组件，我想说，不要害怕连接“更深”的组件。试着去寻找更简单、更简洁的代码，这样的代码才有意义去研究和推理，而不是在这里遵循一些精确的科学。

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

与Redux和它的连接组件，没有真正的成本连接到状态更经常，所以基本上这都取决于你，和你的遗产。

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

好的阅读技巧：推荐使用connect() #419

艾布拉莫夫的智能与愚笨组件博客文章