愚蠢的组件应该如何"愚蠢"？

Question

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

例如,我有一个智能组件(posts),它有一个哑组件(post-list),其中包含哑组件(post).直到这里一切都很好看.

要显示一些按钮,我需要知道用户是否是admin,我需要将属性admin一直传递posts给post.

我可以将哑组件连接post到商店并直接从哑组件中获取.或者在这种情况下组件是否更愚蠢？它看起来像这样:

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

我认为这样可以节省大量的冗余.这是好事还是坏事？

Answer 1

愚蠢的组件应该是没有任何逻辑的表示组件.

根据 Redux的Dan Abramov作者,哑组件符合以下标准:

• 关注事物的外观.
• 可以在里面包含表示和容器组件**,并且通常有一些自己的DOM标记和样式.
• 通常允许通过this.props.children进行遏制.
• 不依赖于应用程序的其余部分,例如Flux操作或商店.
• 不要指定数据的加载方式或变异方式.
• 仅通过道具接收数据和回调.
• 很少有自己的状态(当他们这样做时,它是UI状态而不是数据).
• 被编写为功能组件,除非它们需要状态,生命周期钩子或性能优化.
• 示例:页面,边栏,故事,UserInfo,列表.

有角度的

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

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

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

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

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

希望这很有帮助.

Answer 2

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

不过你问了两个问题。哑组件应该有多哑以及如何最好地确定一个组件是否应该是哑的。

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

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

但这只是一个通用方法的例证。询问哑组件是否可能存在于其智能组件之上或作为其智能组件的兄弟组件，如果是，则升级它，如果不是，则将其保留为哑组件。

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

哑组件需要传递任何发生变化的内容，并且作为最佳实践，需要调用基于用户操作可能发生的任何事件的方法。

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