做出反应。如果展示组件包含容器组件会很糟糕吗？

Posted 2023-02-22

【中文标题】做出反应。如果展示组件包含容器组件会很糟糕吗？

【英文标题】：React. Is it bad if presentational components contain container components?

【发布时间】：2016-08-15 07:59:01

【问题描述】：

根据https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.i63w9pvzw

演示组件：

内部可能同时包含展示组件和容器组件**，并且通常有一些自己的 DOM 标记和样式。 不依赖于应用程序的其余部分，例如 Flux 操作或存储。

我认为如果展示组件包含容器组件，它们将依赖于 Flux 或 Redux（或任何容器组件所依赖的）。

这将使演示组件难以测试和重用。

【问题讨论】：

有问题吗？

@aet 我想知道包含容器组件的展示组件是否不好？

很公平。答案并不直截了当。有人可能会争辩说，最好构建应用程序，这样您就不需要嵌套容器组件。例如，使用 redux，没有什么能阻止您将整个 state 对象作为 props 传递给每个组件（这是一种常见的模式），从而消除了对这些容器的需求。但也许你这样做有一个很好的理由，比如如果一个子组件需要状态并且该状态恰好是一个大对象，如果它被传递给每个人，性能可能会受到影响。

【参考方案1】：

还不错，很好。 react-redux 的全部意义在于让您将容器组件直接连接到商店，而不必将整个商店作为道具传递给每个组件。组件重用不是问题，因为<Provider> 组件将使任何连接的容器组件在其下方的任何位置工作。

实际上，测试容器组件也不难。您可以将连接的组件设置为默认导出，也可以将未连接的组件导出为命名导出，您可以将其用于测试，并在这些测试中手动传递道具。有关详细信息，请参阅'Writing Tests' part of the Redux docs 的“连接组件”部分。

至于测试包含容器组件的展示组件，这不是问题。浅渲染在测试中仍然可以正常工作（除非您遇到this issue）。如果您需要在测试中挂载组件，您始终可以将其包装在 <Provider> 组件中，并使用特定于该测试的存储。

编辑：此答案特定于带有 react-redux 的 Redux。我不知道其他 Flux 实现可能会遇到一些困难。