创建react布局头组件的更好方法

Question

我将使用react和redux创建一个大规模的应用程序，并且第一次开始构建布局的头组件。布局标头将有4个子部件。

1.图标，单击它后将显示所有在线用户。

2.图标，单击该图标后将显示最新的10个通知。

3.图标，显示单击该图标后收到的最新10条消息。

4.登录用户名将是下拉按钮，以显示一些“我的配置文件，注销，帐户设置”导航链接。

正如我在很多地方所读到的，redux必须有尽可能少的有状态组件。因此，通过记住这个概念，我认为只有一个头部智能容器，其中包含所有图标(如{headerOnlineUsers:[], headerMessages:[], headerNotifications:[]} )的默认状态。

因此，如果我遵循redux最佳实践，只创建一个包含4个不同哑组件的智能报头容器，那么每次更改其中任何一个组件的状态时，都会重新呈现整个标头容器。但我只想重新呈现状态更改的组件。

例如，如果我让一个用户通过websocket加入聊天，它将分派一个动作，还原器将更新状态的列表。但在这种情况下，我希望我唯一的在线用户组件重新呈现，而不是整个头容器。。

有谁能给我建议一下实现这种布局的最佳方法吗？

Answer 1

我不赞成你的选择，但更倾向于一种更细粒度的方法。

• 如果您稍后将标题拆分为2，或者希望在其他地方显示按钮，怎么办？
• 如果您有另一个版本的您的标题为一个分段的网站？你需要另一个容器来再次收集所有的信息。

redux的一般逻辑是将数据敏感的和不敏感的区分开来。您的单个列表是数据敏感的，标题本身没有理由到目前为止。更重要的是，如果你想把动作附加到图标上，它很快就会变得杂乱无章，把这些动作带回标头和它的容器，如果你需要移动它们，那就更麻烦了。

我会这样做(现在我也开发了一个带有react和redux的大型应用程序)，那就是有一个商店，里面有三个物品列表，然后是3个容器，每个图标/下拉菜单都有一个连接一个顶部列表到组件的容器。

然后，报头只是一个无状态函数，将所有容器连接在一起。这样，如果您需要移动其他地方的一个按钮或重用它，您只需导入容器和瞧！

Answer 2

React.js将只负责重新呈现所需的内容。所以这个问题已经为你解决了：)

对于我来说，您计划做的事情听起来是明智的，我只想改变一点:智能头容器不应该使用内部状态。相反，您的redux商店应该如下所示：

{headerOnlineUsers:[], headerMessages:[], headerNotifications:[]}

您应该将redux存储传递到智能报头容器中(查看redux文档中的connect函数)。这样，您就可以通过this.props在组件中使用redux存储内容，仅此而已。