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

因此，我知道没有一种方法是“正确的”，但我想就每种方法的优缺点进行一次对话

因此，在阅读了丹·阿布拉莫夫的和，并回顾了教程之后，我想知道这两种不同方法的优缺点：

方法A：

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

A第B条：

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

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

编辑

奇怪的是，在“传递存储”部分，您可以找到对“behind”提供者（react上下文）的引用。在上下文文档中明确指出：

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

以及：

在使用此API构建组件之前，请考虑是否存在 更清洁的替代品。我们喜欢简单地把这些东西作为一个整体传递 在这种情况下使用数组

---

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

这成为可读性和重新渲染性能的问题。有时，通过几个级别显式地传递道具可能更具可读性。其他情况下，如果您启动一个新的连接并立即输入所需的数据，可能更容易理解。另外，请注意，

connect（）

做了大量工作，以确保您自己的组件仅在确实需要时才重新渲染，因此，当连接组件时，您实际上可以获得一些潜在的性能改进。相反，“哑”组件通常不实现

shouldComponentUpdate

，这意味着它们每次都会重新渲染

正如您所说，没有一个单一的正确答案-在对您自己的应用程序结构有意义的地方使用

connect（）

编辑：

为了回答您关于React-Context文档的问题，React-Redux的

组件专门封装了一个事实，即它恰好使用了上下文。这样，如果将来上下文API或行为有任何更改，您自己的应用程序就不必担心，因为它可以由提供商的更新来处理

---

换句话说，不要担心：）

这成为可读性和重新渲染性能的问题。有时，通过几个级别显式地传递道具可能更具可读性。其他情况下，如果您启动一个新的连接并立即输入所需的数据，可能更容易理解。另外，请注意，

connect（）

做了大量工作，以确保您自己的组件仅在确实需要时才重新渲染，因此，当连接组件时，您实际上可以获得一些潜在的性能改进。相反，“哑”组件通常不实现

shouldComponentUpdate

，这意味着它们每次都会重新渲染

正如您所说，没有一个单一的正确答案-在对您自己的应用程序结构有意义的地方使用

connect（）

编辑：

为了回答您关于React-Context文档的问题，React-Redux的

组件专门封装了一个事实，即它恰好使用了上下文。这样，如果将来上下文API或行为有任何更改，您自己的应用程序就不必担心，因为它可以由提供商的更新来处理

换句话说，别担心：）