18

我正在使用智能/转储组件构建我的 Redux (NgRx) 应用程序，但我正在努力决定愚蠢的组件应该有多“愚蠢”......

例如，我有一个智能组件( posts)，它有一个哑组件( post-list)，其中包含哑组件( post)。直到这里一切看起来都不错。

要显示一些按钮，我需要知道用户是否admin存在，并且我需要将属性从toadmin一路向下传递。postspost

我可以将哑组件连接post到商店并直接从哑组件获取它吗？还是这种情况下的组件不再愚蠢？它看起来像这样：

  private admin$: Observable<boolean>;
  constructor(private store: Store<AppState>){
    this.admin$ = this.store.let(isAdmin());
  }

我认为这将节省大量冗余。这是好还是坏的做法？

4

3 回答 3

7

哑组件应该是没有任何逻辑的展示组件。

根据Redux 的作者 Dan Abramov 的说法，哑组件符合以下标准：

  • 关心事物的外观。
  • 内部可能同时包含展示组件和容器组件**，并且通常具有一些自己的 DOM 标记和样式。
  • 通常允许通过 this.props.children 进行收容。
  • 不依赖于应用程序的其余部分，例如 Flux 操作或商店。
  • 不要指定数据是如何加载或变异的。
  • 仅通过 props 接收数据和回调。
  • 很少有自己的状态（当他们这样做时，它是 UI 状态而不是数据）。
  • 除非它们需要状态、生命周期挂钩或性能优化，否则被编写为功能组件。
  • 示例：页面、侧边栏、故事、用户信息、列表。

在角度

他们应该只显示信息并通过输入和输出流处理事件。

所以我的建议是在智能和愚蠢上查看ngrx示例应用程序：https ://github.com/ngrx/example-app

你也可以看到我是如何在游戏中实现聪明和愚蠢的。 https://github.com/wizardnet972/tic-tac-toe

注意：容器组件也是可重用的。组件是表示组件还是容器组件是实现细节。

表示组件通过@Input() 接收数据并通过@Output() 通信事件，但通常不维护它们自己的内部状态。在数据更新流回之前，所有决策都被委托给“容器”或“智能”组件。

希望这会有所帮助。

于 2016-10-17T21:06:42.517 回答
1

我认为“愚蠢”可以在不同的环境中重复使用。

哑巴只会对它的父母感兴趣。

我使用 angular 2 对自己重复的一句口头禅。如果它变得复杂和令人困惑，请重新考虑我的策略。

另一个级别的组件呢？管理员模式是一个孩子，非管理员是另一个。这些子组件可以通过 Input 获取数据，并通过 Output 发出。

于 2016-07-30T19:25:13.763 回答
1

这个问题适用于任何客户端框架，包括 React/Flux 以及遗留的 Angular 1.x 应用程序（通常通过https://github.com/angular-redux/ng-redux之类的东西），并且与许多事情一样，答案是这取决于您的用例。

你问了两个问题。愚蠢的组件应该有多愚蠢，以及如何最好地确定一个组件首先是否应该是愚蠢的。

问题 1：首先如何最好地确定一个组件是否应该是哑的：

在您的具体情况下，我会问一个问题：帖子列表或帖子组件会在帖子之外使用吗？就是这样，使最高“级别”的智能组件（也称为容器）。例如，如果 Post 只能在 Post List 内部使用，但 Post List 可以在 Posts 外部使用，那么 Post List 应该是智能组件，让您可以更轻松地将其“拖放”到其他组件中。

不过，这体现了一种通用方法。询问一个哑组件是否可能存在于它的智能组件之上或作为其兄弟组件，如果是，则提升它，如果没有，则将其保留为哑组件。

问题 2：一个哑组件应该有多“哑”：

一个愚蠢的组件需要传递任何变化，作为最佳实践，方法是调用基于用户操作可能发生的任何事件。

例如：如果文本、图像或媒体基于应用程序状态的变化，则应将此数据传递给组件。如果存在按钮、链接、表单或其他可点击元素，则至少传递可选的回调/方法来调用这些元素将为您的组件的用户（甚至是您）提供未来随着应用程序需求增长的灵活性。

于 2016-07-26T00:26:00.133 回答