时间戳

首页 > 解决方案 > 使用路由还是状态？

reactjs - 使用路由还是状态？

问题描述

在过去的 2 年里，我在不同的项目中一直在使用 React，两者都有不同的 React 方法，这让我觉得我是否正确使用了它。

假设我们要创建一个有 3 个视图的游戏：

第一种模式将使用 state/props 来了解您需要渲染哪个视图。这是一些伪代码：

const view = {
 settings: <Settings/>,
 game: <Game/>,
 stats: <Stats/>,
}
return view[this.props.view]

第二种方法将使用历史来引导您进入视图：

 history.push("/game/settings")
 history.push("/game/playing")
 history.push("/game/stats")

两种方式都有效，但它们确实不同。我的问题是：哪个更好？最重要的是：为什么？

标签： reactjs

解决方案

两种方法都有其优点和缺点。

我们应该在需要时使用第一个模式

  • 组件的条件渲染。
  • 组件不应直接通过 url 呈现。

我们应该在以下场景中使用第二种模式：

  • 您可以使用第二种方法进行路由级分块。这将在第一次加载时减少您的 JS 包大小。因此快速的游戏加载时间。
  • 假设你想分享你的游戏统计页面。您是否有单独的路线，您可以通过 url 共享第一种方法，这非常困难。

推荐阅读