Javascript 试图理解React with Conditional中不断变化的UI

在过去的六个月里，我一直在断断续续地学习如何应对。我了解它是如何工作的，如何制作组件以及库的所有核心基础知识

然而有一件事让我绊倒了。 到目前为止，我只做了一些较小的应用程序，因为我还没有学到足够的知识来承担更大的项目（不是公司规模，而是类似SPA的项目）

---

我的问题是：当使用状态更改UI时，使用大量条件块来更改渲染的内容。这在大范围内看起来如何？假设我想展示6个不同的视图，每个视图都有许多不同的组件，这不是一个又一个条件吗？使用返回/呈现中的所有条件不是很难管理吗？ 我是否遗漏了什么（我几乎肯定是），或者这就是我的反应？我找不到任何资源来解释您将如何在react中构建这些视图，如果这不是最佳实践或以后会引起问题，我也不想用我的方式来拼凑一些东西。 我听说过React路由器，这对这个场景很有帮助，但我仍然想知道我是否认为React在这里是错误的，或者遗漏了一个核心概念

---

如果有人能帮我分析一下，我会非常感激的

“假设我想展示6个不同的视图，每个视图都有许多不同的组件”，你可以使用路由器来完成，因为每个视图都被视为应用程序的“页面”。您可以使用类似于

react router

的方法来实现这一点。对于每个视图中的不同组件，条件不会都在同一个文件中，因为条件可能会分布在整个应用程序中，因此也会分布在组件树中。如果您发现自己在使用

If。。。其他的如果。。。其他的如果…其他…

在单个渲染函数中，然后将该组件分解为更小的组件以分离逻辑。一个好的规则是，如果可以进一步将状态向下移动（进入子组件），则执行此操作。如果子组件可以自己处理逻辑，那么父组件不需要处理子组件的逻辑。对于需要在应用程序的许多断开连接的部分（例如，用户状态，如名称、电子邮件和isAuthenticated）之间共享状态的情况，可以使用React的上下文API。这两个答案都非常有用！我认为，从一个更传统的前端开始，没有使用条件来呈现UI，我认为我做错了什么。现在我了解了React中呈现的UI有多复杂，更多的是关于逻辑/条件的管理，而不是试图少用它们！