Javascript React路由器与条件渲染

我对使用React路由器和常规条件渲染方法之间的核心区别（特别是在性能方面）感到困惑。 我的意思是“常规条件渲染方法”，例如：

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

---

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

react路由器本身使用条件渲染，完全可以用条件渲染替换其功能。您不必使用它，而且据我所知，对于为什么它会比您自己的条件渲染更有效，没有一般的理由

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

例如，考虑下面的示例（使用Read Read指南修改）使用条件呈现：

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>
    );
  }
}

class BasicExample扩展了React.Component{
构造函数（）{
超级（）；
this.state={currentView:“home”}；
}
render（）{
const currentView=this.state.currentView；
返回(

this.setState（{currentView:“home”}>home
this.setState（{currentView:“about”}>about
this.setState（{currentView:“topics”}>
话题


{currentView===“主页”&&}
{currentView===“关于”&&}
{currentView===“主题”&&}
);
}
}

使用路由器的诗句：

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

const BasicExample=（）=>(

家
关于
话题


)

在第一种情况下，您向组件引入内部状态，您需要将回调传递给希望更改当前视图的任何子级，没有明确的方法来处理分层路由，获得意外的

currentView

值的情况由您来处理，可以说后一个示例更容易阅读。另一方面，第一个示例更明显，并且使用React路由器库更灵活。与任何事情一样，这是一种权衡，你需要在你试图解决的问题的背景下进行评估

---

此外，您通常希望将某些内容与逻辑视图的概念相结合，例如，您可能希望更改浏览器url、维护视图历史记录或通过状态容器管理当前逻辑视图，这些都是路由器帮助您实现的功能。

谢谢！实际上，我们的应用程序没有很多组件（最多20多个），我们可能根本不需要历史跟踪功能，而且我们认为，与第三方API相比，我们定制的路由器/状态管理将更容易添加新功能或按需修改，这就是为什么我有点犹豫是否采用React路由器的原因。无论如何，谢谢！是的，如果你的应用程序很简单，或者只是在逻辑路由方面没有太多内容，那么选择不添加react路由器的额外依赖项是完全合理的。