Reactjs 创建react-redux布局标题组件的更好方法

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

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

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

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

4.登录用户名，将通过下拉按钮显示一些“我的个人资料、注销、帐户设置”导航链接

正如我在很多地方读到的关于redux的文章，我们必须尽可能少地使用有状态组件。因此，通过记住这个概念，我认为只有一个头部智能容器，其头部状态由所有图标的默认状态组成，如

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

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

例如，如果我让一个用户通过websocket加入聊天，它将发送一个操作，reducer将更新状态的headerOnlineUsers列表。但在这种情况下，我希望我唯一的在线用户组件重新呈现，而不是整个标题容器。

---

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

React.js只负责重新渲染所需内容。所以这个问题已经为您解决了：-）

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

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

---

您应该将redux存储传递到smart header容器中（查看redux文档中的

connect

函数）。通过这种方式，您可以通过

This.props

在组件中使用redux存储内容，就这样。

我不赞成您的选择，但希望采用更精细的方法

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

redux中的一般逻辑是区分哪些是数据敏感的，哪些不是。您的个人列表是数据敏感的，标题本身没有理由到目前为止。更重要的是，如果您想将动作附加到图标上，那么将这些动作带回标题和容器会很快变得混乱，如果您需要移动它们，甚至会变得更混乱

我会这样做（我现在也会这样做，因为我halso使用react和redux开发了一个相当大的应用程序），那就是有一个商店，里面有3个项目列表，然后是3个容器，每个图标/下拉列表对应一个容器，将一个特定列表链接到组件

---

那么header只是一个无状态函数，将所有容器放在一起。这样，如果您需要将一个按钮移动到其他地方或重复使用它，您只需导入容器，瞧

谢谢，明白了。您的意思是说外部标题组件将是一个哑的，内部部分作为smart redux容器。对吗？正是这样，您不必处理事件和道具在标题及其子项之间的传输，这是一项繁重的任务，不会带来任何价值，也不会降低可重用性。