页面布局在哪里适合反应（redux）展示与容器模式？

Question

我读过 Dan Abramov 关于 Presentational and Container Components 的文章。在其中，他解释了一种模式，在该模式中，您将组件分为处理 事物外观 的组件和处理 事物运作方式 .[=16= 的组件]

我正在尝试根据此架构构建我的 React 应用程序，但遇到了运行问题。假设我有一个页面 UserProfile。它包含一组表示组件，并且需要各种数据源。我需要定义此页面的外观，我称之为 UserProfile.

作为演示组件的页面

然后我是否将 UserProfile 组件构建为展示组件，并通过将每个展示组件包装在适当的容器中来连接所有数据源？

<UserProfile> // presentational
  <AvatarData> // container
    <Avatar /> // presentational
  </AvatarData>
  <CommentData> // container
    <Comments /> // presentational
  </CommentData>
</UserProfile>

因为这不允许单个组件有多个数据源，并且它会导致您的容器代码变得相当重复。

作为容器组件的页面

或者，In the real-world example 在 redux repo 中使用了不同的方法，其中容器还定义了布局（虽然相当简约）。这允许您在一个地方定义页面所需的所有数据源，并允许您为单个组件使用多个数据源。但是，在此组件中定义样式是一个禁忌，如果您的页面非常简约，这会起作用，但如果变得更复杂，就会分崩离析。

所以我的问题是：使用这种模式时应该如何定义复杂的页面（包括样式、数据和行为）？

Answer 1

不要过度考虑 "container" 和 "presentational" 方面。这是一个有用的区别，但没有硬性规定必须以绝对严格的方式分解组件。在容器组件中放置一些布局和展示渲染完全没问题，在展示组件中渲染容器组件也完全没问题。

页面布局在哪里适合反应（redux）展示与容器模式？

Where do page layouts fit into the react (redux) presentational vs container pattern?

reactjs

redux

react-redux