在 React 中动态更新导航栏和侧边栏的最佳方法是啥？

Posted 2023-04-14

【中文标题】在 React 中动态更新导航栏和侧边栏的最佳方法是啥？

【英文标题】：What is the best way to dynamically update Navigation bar and side bar in React?在 React 中动态更新导航栏和侧边栏的最佳方法是什么？

【发布时间】：2019-02-21 22:08:19

【问题描述】：

我为我的 react 应用创建了一个布局组件，我想在路线更改时动态更新侧边栏和导航栏。

我可以使用 redux，但所有状态和方法都将随时可用，即使我不需要它们。

我也看了下新的react context，但是和redux有同样的问题。

使用 react 路由器，看起来我只是在安装一个新的侧边栏或导航栏。

有没有办法为我的布局组件动态提供新的状态和方法？ （用不同的状态替换状态，或者多个新的一次：apple --> orange）

React 路由器看起来是我最好的选择，但我可以通过在每个新路由中包含侧边栏和导航栏来做同样的事情。

动态添加链接不是问题，添加影响新挂载组件的按钮才是问题。导航栏和侧边栏位于父组件中，因此需要了解所有状态和方法。

谢谢，

编辑：

例子：

---

- 主页 - 关于 - 联系方式

没问题，有链接。我可以使用 switchComponet 方法将链接组件替换为任何其他组件。

---

停止 - 加速 - 帮助

这些都是按钮。现在我需要将它们的方法和状态添加到 Layout 组件中。如果应用程序增长，则需要将更多状态和方法添加到顶部组件。 我可以将它们全部放在 redux 中，但所有状态和方法始终可用。我可能对redux有错误的印象，我认为它可能会占用很多资源，但我可能错了。

【问题讨论】：

“但所有状态和方法都将始终可用”是什么意思？有什么问题？

我所说的“所有状态和方法将始终可用”的意思是：我必须将它们添加到反应存储中，并且始终可用。

我仍然不确定问题出在哪里。为什么有些东西总是可用不好？我建议完善你的问题，如果可以的话，包括一些代码。展示你想要/期望的东西，以及为什么你所拥有的东西是有问题的。

我可能对redux有错误的印象，我在想它可能会占用很多资源，但我可能错了。我编辑了我的原始帖子。

您可能需要首先考虑您计划在 Redux 或类似中存储和操作的数据的结构。如果不了解您的 store、action 和 reducer，就很难回答。您似乎正在尝试基于导航元素而不是相反来定义您的应用程序数据结构。您能否分享模拟数据和/或您计划如何操作该数据、Redux 或 Context 或介于两者之间的任何内容。是的，Redux 性能可能是一个问题，但这取决于很多因素，并且有一些方法可以缓解这种情况。

【参考方案1】：

我的猜测是，“状态和方法”是指布局组件中 react-redux 连接函数的 mapStateToProps 和 mapDispatchToProps 参数。

如果是这种情况，那么您有理由担心将布局的所有可能内容的逻辑放在那里。

我认为您的问题是您假设您必须仅将顶部容器连接到 redux，而事实并非如此。

你可以连接你的布局组件来处理导航和侧边栏，同时让组件嵌套在你的布局组件中，并通过它们自己的存储键（存储状态的一部分）和操作连接到 redux。

这样您就不需要为每个布局内容添加所有需要的商店状态和操作。每个布局内容都将与其逻辑保持一致。

这其实是 redux 的目的之一。

【讨论】：

谢谢，我会试试的。我的印象是你应该只有一家商店。

你有一个 store，但是一个 store 可以分成不同的 key，每个 key 使用不同的 reducer。这些键的使用以及由 reducer 触发这些键值突变的操作由连接的组件自行决定

如果你有很多redux，redux会导致性能问题吗？谢谢，

我知道这可能很难放手，但在性能成为问题之前不要担心性能。通常情况下，你不会有任何问题，如果你这样做了，它就会出现在你最初没想到的地方。在易于理解的 api、良好的用户体验和可读的代码上多花十倍的时间。