哑巴组件该有多傻？

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

哑组件应该是表示组件，没有任何逻辑。

根据Dan 著有“Redux”一书，哑组件符合以下标准：

• 关心的是事情的样子。
• 可以在内部同时包含表示组件和容器组件**，并且通常有一些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以及遗留的角1.x应用程序(通常是通过类似于https://github.com/angular-redux/ng-redux的应用程序)，而且与许多事情一样，答案是它取决于您的用例。

但你问了两个问题。哑巴组件应该有多傻，以及如何最好地确定一个组件最初是否应该哑。

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

就你的具体情况而言，我想问的问题是：“邮政名单”或“邮政部分”是否会在邮件之外使用？就是这样，使最高级别的智能组件(也称为容器)。例如，如果Post只在Post列表中使用，而Post列表可能在外部使用，那么Post List应该是智能组件，您可以更容易地将它“放到”其他组件中。

不过，这说明了一种普遍的做法。询问一个哑组件是否可能存在于它的智能组件之上，或者作为其同级组件存在，如果存在，则将其提升，如果没有，则将其保留为一个哑组件。

问题2:哑巴成分应如何“哑”：

需要传递任何更改的哑组件，作为最佳实践，方法可以根据用户操作调用任何可能发生的事件。

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

Answer 3

我会认为“愚蠢”是在不同的环境中被重用的。

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

我用角度2重复一个咒语，如果它变得复杂和令人困惑，重新考虑我的策略。

那另一个层次的组件呢。管理模式是一个子模式，非管理模式是另一个。这些子组件可以通过输入获取数据，并通过输出发出数据。