React Router VS条件渲染

Question

我对使用React Router和常规的条件渲染方法之间的核心差异(特别是在性能方面)感到困惑。我所指的“常规条件渲染方法”是，例如：

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

我认为它可以达到与使用React Router完全相同的目的，那么为什么我们还需要React路由器呢？使用react Router会带来更好的性能体验吗？(假设我们不需要历史功能)？

Answer 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>
)

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

此外，通常希望将某些内容与逻辑视图的概念集成在一起，例如，您可能希望更改浏览器的url、维护视图的历史记录，或者通过状态容器管理当前的逻辑视图，这些都是React Router帮助简化的功能。