(好奇) - 最好是拥有顶级智能组件还是小型连接组件?

时间:2016-06-15 02:27:15

标签: javascript reactjs redux react-redux

我过去已经构建了一些较大的Redux应用程序(它非常有趣),但现在我正在使用它来构建一个简单的小型单一页面类型的东西。我之所以选择Redux,是因为有一些状态/ UI操作需要管理,我觉得它很适合。再加上它太棒了。

就像现在一样,我将顶级<App />组件作为连接到商店/能够调度操作(通过mapStateToProps/mapDispatchToProps方法)的唯一组件,并且每个组件都是&#39; s decedents / section components本质上是&#34; dumb组件&#34;只是继续传递部分状态和动作调度函数。

我可以看到自己以另一种方式写这个,每个部分/组件/主要后代分别连接到商店。我喜欢这个想法,因为对于许多后代来说,传递道具的次数会减少,但是&#34;涓涓细流&#34;上面提到的方法让我想起了我写的前几个React应用程序的数据流。

我很好奇关于最佳方式的共识是什么,或者是否有一个或者完全取决于我作为开发者?

2 个答案:

答案 0 :(得分:4)

小型连接组件 因为它减少了不必要的重新渲染,应用程序的每个部分都会更新自己的状态。
好的解决方案:REACT CONF https://www.youtube.com/watch?v=KYzlpRvWZ6c

答案 1 :(得分:3)

在应用程序的最顶层只有一个连接组件的问题是你必须明确地将道具传递给子组件,有时你最终传递属性和通过孩子的孩子的孩子等回调。许多您的组件将从其父级接收道具,只是将它们传递给他们的孩子,而不使用它们。当你看到自己处于这种情况时,这是一个很好的迹象,你应该考虑创建一个连接组件,而不像Dan Abramov所说:

  

您将父组件与子组件需要呈现的内容相结合。你基本上传递了许多只有孩子需要的道具,改变它们可能会带来痛苦的重构。相反,只要您看到该组件在不使用它的情况下向下传递道具,我们建议生成一个&#34;容器&#34;使用connect()的组件。

source

此外,只有顶级连接组件,您的应用程序将始终从顶部到底部重新渲染。即使你的每个哑组件都有严格的shouldComponentUpdate实施,你也会遇到糟糕的表现。

看看the discussion from where I excerpted this quote