Redux 或简单的 React 来处理导航

Question

我对 React 和 Redux 还很陌生，目前我正在努力思考如何通过 UI 共享状态。

我有一个非常简单的用例。

想象一个包含三列的容器：

1. 带有四个按钮的左侧菜单
2. 中心内容部分
3. 包含其他内容的正确容器

当我点击四个按钮之一时，我希望发生三件事：

1. 按钮上的类已更新，因此它具有边框
2. 其他按钮上的类已更新，因此如果在删除其边框类之前已单击它们
3. 更新了中间部分的内容。此内容需要从后端 (Django Rest) 获取数据

这是我的问题：

1. 我应该将此交互分为仅 UI 关注点和数据驱动关注点，还是使用单一状态处理两者？
2. 由于按钮共享一个父组件，但它们不与中心组件共享，如果我不想在 Container 的最顶层定义状态，是否最好使用 Redux？
3. 因为我是新手，而且 Hooks 似乎是要走的路，所以我尝试使用钩子而不是类，分离组件和容器是否仍然有意义？

Answer 1

你可以使用 react-router-dom 库来实现你想要的。 对于您的左侧菜单，您可以在 css 中创建活动类，然后使用 react-router-dom 的 location.pathname 属性检查当前路由，如果是针对该按钮，则为其设置活动类。 对于您的主要部分，您可以在 useEffect 挂钩中获取数据。 我认为将数据和 UI 分开很好，但对于按钮，我说的很好。 您可以将数据存储在主要部分的 redux 中。