我正在使用智能/转储组件构建我的Redux(NgRx)应用程序,但我正在努力决定如何“愚蠢”愚蠢的组件应该是…
例如,我有一个聪明的组件(帖子),它有一个愚蠢的组件(post-list),它包含愚蠢的组件(post).直到这里,一切都看起来不错.
要显示一些按钮,我需要知道用户是否管理员,我需要将属性管理员一直从帖子传递到帖子.
我可以将愚蠢的组件文章连接到商店,并直接从愚蠢的组件中获取.或者在这种情况下的组件是否还是笨蛋?
它看起来像这样:
private admin$: Observable<boolean>; constructor(private store: Store<AppState>){ this.admin$= this.store.let(isAdmin()); }
我认为这会节省大量的冗余.这是好还是坏的做法?
哑组件应该是没有任何逻辑的表示组件.
据反应团队的Dan Abramov介绍,哑配件符合以下标准:
>关心事情的样子.
>可以在内部包含表示和容器组件**,通常有一些自己的DOM标记和样式.
通常可以通过this.props.children进行控制.
>没有依赖于应用程序的其余部分,例如Flux操作或商店.
>不要指定数据如何加载或突变.
>通过道具专门接收数据和回调.
>很少有自己的状态(当他们做的时候,它是UI状态而不是数据).
>被编写为功能组件,除非它们需要状态,生命周期挂钩或性能优化.
>示例:页面,边栏,故事,用户信息,列表.
有角度
所以我的建议是检查ngrx示例应用程序在智能和哑巴:https://github.com/ngrx/example-app
还可以看到我在游戏中如何实现智能和愚蠢.
https://github.com/wizardnet972/tic-tac-toe
注意:容器组件也可重用.组件是否是演示组件或容器组件是实现细节.
演示组件通过@Input()接收数据,并通过@Output()传达事件,但通常不会保留自己的内部状态.所有决策都会委托给“容器”或“智能”组件.
希望这是有帮助的