反应路由器VS条件渲染-Java 学习之路

我对使用React Router和常规条件渲染方法之间的核心差异（特别是关于性能）感到困惑 . 我的意思是“常规条件渲染方法”，例如：

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

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

1 回答

5
React Router本身使用条件渲染，完全可以用条件渲染替换它的功能 . 你不必使用它，据我所知，没有一般性的论据可以解释为什么它比你自己的条件渲染更有效 .

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

例如，请考虑使用条件呈现的以下示例（从反应路由器指南修改）：
```
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有助于实现的功能
回复于 2024-04-19T07:53:59+08:00

反应路由器VS条件渲染

1 回答

相关问题