React Router VS 条件渲染

Posted 2023-02-24

【中文标题】React Router VS 条件渲染

【英文标题】：React Router VS Conditional Rendering

【发布时间】：2018-12-13 08:41:06

【问题描述】：

我对使用 React Router 和常规条件渲染方法之间的核心差异（尤其是在性能方面）感到困惑。 我的意思是“常规条件渲染方法”，例如：

我们可以在父组件中设置一个状态，并将其作为子组件的道具传递， 我们根据需求有条件地更新这种状态，子组件将重新渲染，因为不同的内容取决于它的道具。

我认为它可以实现与使用 React Router 完全相同的目标，那么为什么我们仍然需要 React Router？使用 react Router 会带来更好的性能体验还是什么（假设我们不需要历史功能）？

【参考方案1】：

React Router 本身使用条件渲染，完全可以用条件渲染替换它的功能。您不必使用它，据我所知，没有一般的论据可以说明为什么它比您自己的条件渲染更高效。

使用 React Router 的原因是因为它允许你以声明的方式表达你的路由。应用程序通常具有多个逻辑视图或路由，您可以有条件地选择在代码中在给定时间显示的内容，但随着可能视图数量的增加，此逻辑可能会变得复杂，许多开发人员发现它更易于管理通过以声明式语法表达视图来增殖视图，这就是 React Router 的核心功能。

例如，考虑以下使用条件渲染的示例（根据 react 路由器指南修改）：

class BasicExample extends React.Component 
  constructor() 
    super();
    this.state =  currentView: "home" ;
  

  render() 
    const currentView = this.state.currentView;

    return (
      <div>
        <ul>
          <li onClick=() => this.setState( currentView: "home" )>Home</li>
          <li onClick=() => this.setState( currentView: "about" )>About</li>
          <li onClick=() => this.setState( currentView: "topics" )>
            Topics
          </li>
        </ul>

        currentView === "home" && <Home />
        currentView === "about" && <About />
        currentView === "topics" && <Topics />
      </div>
    );
  

使用路由器的诗句：

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component=Home/>
      <Route path="/about" component=About/>
      <Route path="/topics" component=Topics/>
    </div>
  </Router>
)

在第一种情况下，您将内部状态引入组件，您需要将回调传递给想要更改当前视图的任何子级，没有明确的方法来处理分层路由，如果您得到意外的 @ 987654323@ 值由您处理，可以说后一个示例更易于阅读。另一方面，第一个示例更明显，并且使用 React Router 库更灵活。与任何事情一样，这是一个权衡，您需要根据您要解决的问题进行评估。

此外，通常希望将某些事物与您的逻辑视图概念集成，例如，您可能想要更改浏览器 url、维护视图历史记录或通过状态容器管理当前逻辑视图，这些都是 React Router 帮助实现的功能

【讨论】：

谢谢！实际上我们的 App 并没有很多组件（最多 20+），我们可能根本不需要历史跟踪功能，我们认为我们定制的路由器/状态管理将更容易添加新功能或根据需求修改与 3rd 相比派对 API，这就是为什么我有点犹豫是否采用 React Router。无论如何，谢谢！

是的，如果您的应用程序很简单或者只是不包含太多逻辑路由，那么选择不添加 react-router 的附加依赖项是完全合理的。

In the first case you introduce internal state to your component, you'll need to pass a callback to any children wanting to change the current view, there's no clear way to handle hierarchal routing, the case where you get an unexpected currentView value falls to you to handle, and arguably the latter example is easier to read. 如果您使用任何状态管理库，或者仅使用上下文，这都不是问题。声明式语法很容易在没有 react-router 的情况下实现。使用路由器的主要优点是它可以管理历史记录并允许用户通过其 URL 直接转到路由