反应。如果展示组件包含容器组件是不是很糟糕?
React. Is it bad if presentational components contain container components?
根据https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.i63w9pvzw
Presentational components:
- May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.
- Have no dependencies on the rest of the app, such as Flux actions or stores.
我认为如果展示组件包含容器组件,它们将依赖于 Flux 或 Redux(或任何容器组件所依赖的)。
这将使演示组件难以测试和重用。
还不错,挺好的。 react-redux 的全部意义在于让您将容器组件直接连接到商店,而不必将整个商店作为道具传递给每个组件。组件重用不是问题,因为 <Provider>
组件将使任何连接的容器组件在它下面的任何地方工作。
测试容器组件其实也不难。您可以将连接的组件设为默认导出,但也可以将未连接的组件导出为命名导出,您可以将其用于测试,并在这些测试中手动传递道具。有关详细信息,请参阅 'Writing Tests' part of the Redux docs 的 "Connected Components" 部分。
至于测试包含容器组件的展示组件,这不会有问题。浅渲染在测试中仍然可以正常工作(除非你 运行 变成 this issue)。如果您需要在测试中安装该组件,您始终可以将其包装在一个 <Provider>
组件中,并带有特定于该测试的商店。
编辑: 此答案特定于带有 react-redux 的 Redux。其他 Flux 实现可能会遇到一些我不知道的困难。
根据https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.i63w9pvzw
Presentational components:
- May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.
- Have no dependencies on the rest of the app, such as Flux actions or stores.
我认为如果展示组件包含容器组件,它们将依赖于 Flux 或 Redux(或任何容器组件所依赖的)。
这将使演示组件难以测试和重用。
还不错,挺好的。 react-redux 的全部意义在于让您将容器组件直接连接到商店,而不必将整个商店作为道具传递给每个组件。组件重用不是问题,因为 <Provider>
组件将使任何连接的容器组件在它下面的任何地方工作。
测试容器组件其实也不难。您可以将连接的组件设为默认导出,但也可以将未连接的组件导出为命名导出,您可以将其用于测试,并在这些测试中手动传递道具。有关详细信息,请参阅 'Writing Tests' part of the Redux docs 的 "Connected Components" 部分。
至于测试包含容器组件的展示组件,这不会有问题。浅渲染在测试中仍然可以正常工作(除非你 运行 变成 this issue)。如果您需要在测试中安装该组件,您始终可以将其包装在一个 <Provider>
组件中,并带有特定于该测试的商店。
编辑: 此答案特定于带有 react-redux 的 Redux。其他 Flux 实现可能会遇到一些我不知道的困难。