我将使用 React 和 Redux 创建一个大型应用程序，并第一次开始构建布局的 header 组件。布局 header 将有 4 个子部分。
1.点击后显示所有在线用户的图标
2.图标，点击后将显示最新10条通知
3. 图标，点击后将显示最近收到的 10 条消息
4. 登录的用户名将在下拉按钮中显示一些“我的个人资料、注销、帐户设置”导航链接。
正如我在很多地方读到的有关 redux 的内容，我们必须拥有尽可能少的有状态组件。因此，通过牢记这一概念，我认为只有一个 header 智能容器，其 header 状态包含所有图标的默认状态，例如
{headerOnlineUsers:[], headerMessages:[], headerNotifications:[]}。
因此，如果我遵循 redux 最佳实践并仅创建一个包含 4 个不同dumb组件的智能 header 容器，则每次其中任何一个组件的状态发生更改时，整个 header 容器都将重新渲染。 但我只想重新渲染状态更改的组件。
例如，如果我让一个用户通过 websocket 加入聊天，它将调度一个操作，reducer 将更新状态的 headerOnlineUsers 列表。但在这种情况下，我希望重新渲染我唯一的在线用户组件，而不是整个 header 容器。
有人可以建议我实现这种布局的最佳方法吗？
最佳答案
我不会选择您的选择，但更喜欢更精细的方法。
- 如果您稍后将标题分成 2 个，或者想要在其他位置显示按钮怎么办？
- 如果网站的某个部分有另一个版本的 header 怎么办？您需要另一个容器来再次收集所有信息。
redux 中的一般逻辑是分离数据敏感的内容和不敏感的内容。您的个人列表是数据敏感的，标题本身没有理由如此。更重要的是，如果您想将操作附加到图标上，那么将这些操作带回到标题及其容器中很快就会变得困惑，如果您需要移动它们，那就更困惑了。
我这样做的方式(以及我现在的方式，因为我也使用 React 和 Redux 开发了相当大的应用程序)，将是拥有一个包含这 3 个项目列表的商店，然后是 3 个容器，一个对于将一个特定列表链接到该组件的每个图标/下拉列表。
那么 header 只是一个将所有容器保持在一起的无状态函数。这样，如果您需要将一个按钮移到其他地方或重复使用它，您只需导入容器即可!
关于reactjs - 创建react-redux布局 header 组件的更好方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36305742/