Reactjs 页面布局在哪里适合react（redux）表示模式与容器模式？

我读过丹·阿布拉莫夫的文章。在书中，他解释了一种模式，即将组件分为处理事物外观的组件和处理事物工作方式的组件

我正试图根据这种架构构建我的react应用程序，但遇到了一个问题。假设我有一个页面

UserProfile

。它包含一组表示组件，需要各种数据源。我需要定义此页面的外观，我将调用

UserProfile

页面作为呈现组件

然后我是否将

UserProfile

组件构建为一个表示组件，并通过将每个表示组件包装到适当的容器中来连接所有数据源

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

//表象的
在redux repo中，使用了一种不同的方法，其中容器还定义了一个布局（尽管非常简单）。这允许您在一个位置定义页面所需的所有数据源，并允许您为单个组件使用多个数据源。然而，在这个组件中定义样式将是一个禁忌，如果您的页面非常简约，它会起作用，但如果页面变得更复杂，它就会崩溃

所以我的问题是：当使用这种模式时，复杂的页面（风格、数据和行为）应该如何定义？
不要过度考虑“容器”和“表示”方面。这是一个有用的区别，但并没有硬性规定要求必须以绝对严格的方式分解组件。在容器组件中放置一些布局和呈现渲染是完全可以的，在呈现组件中呈现容器组件也是完全可以的。
是的，我想我有点想过头了。现在，我已经将页面分为一个容器和一个表示部分，我希望能够在这一过程中找出适合我的内容。谢谢你的建议！