Question

所以，我知道没有人正确的＃39;接近这个，但我想谈谈每种方法的利弊。

所以，在阅读了丹·阿布拉莫夫的post和comment，然后阅读this教程之后，我想知道这两种不同方法的利弊：

方法A：

├── Smart / Container component
│   ├── Dumb / presentation component
│   │   ├── Dumb / presentation component
│   ├── Dumb / presentation component

Aproach B：

├── Smart / Container component
│   ├── Dumb / presentation component
│   │   ├── Smart / Container component
│   ├── Dumb / presentation component

这里的主要区别在于你如何管理你的州。在选项B中，最深的组件应该知道redux（例如，dispach），这可能是一个缺点。在方法A中，您可能需要在许多Dumb组件之间的树中传递道具。

修改

奇怪的是，在Redux docs中，在＆＃34;传递商店＆＃34;部分，您可以找到对＆＃34; magic＆＃34;的引用。背后＆＃34;提供商＆＃34; （反应背景）。在上下文文档中，它清楚地说：

正如在编写清晰代码时最好避免使用全局变量一样在大多数情况下应避免使用上下文

和

在使用此API构建组件之前，请考虑是否存在清洁替代品。我们喜欢简单地传递这些物品像这样的情况下的数组

所以，据我所知，这是一种不好的做法？（选项B ......）

Answer 1

这成为可读性和重新渲染性能的问题。有时，通过几个级别明确传递道具可能更具可读性。其他时候，如果您启动新连接并在那里提取所需数据，则可能更容易理解。另请注意，connect()执行批次工作以确保您自己的组件仅在必要时重新呈现，因此您可以在组件实际上获得一些潜在的性能改进已连接。相比之下，“哑”组件通常不会实现shouldComponentUpdate，这意味着它们每次都会重新渲染。

正如你所说，没有一个正确的答案 - 只要对你自己的应用程序结构有意义，就使用connect()。

编辑：

为了回答有关React Context文档的问题，React-Redux的<Provider>组件专门封装了碰巧使用Context的事实。这样，如果对Context API或将来的行为进行了任何更改，您自己的应用程序就不必担心它，因为可以通过更新Provider来处理它。

换句话说，不要担心：）

Redux - 组件不同的方法（智能/哑/容器/演示）

1 个答案: