angular - "dumb"应该是dumb组件？

Question

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

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

要显示一些按钮，我需要知道用户是否是 admin，并且我需要从 posts 一直向下传递属性 admin 到 post。

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

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

我认为这会节省很多冗余。这是好事还是坏事？

Answer 1

dumb组件应该是没有任何逻辑的表现组件。

根据 Redux 作者 Dan Abramov 的说法，dumb组件符合以下条件:

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

Angular

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

所以我的建议是在 smart and dumb 上检查 ngrx 示例应用程序:https://github.com/ngrx/example-app

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

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

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

希望对您有所帮助。