Question

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

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

我认为它可以达到使用React Router的完全相同的目标，那么为什么我们仍然需要React Router？使用React Router是否会带来更好的性能体验或其他效果（假设我们不需要历史记录功能）？

Answer 1

React Router本身使用条件渲染，完全有可能用条件渲染替换其功能。您不必使用它，据我所知，对于为什么它比执行您自己的条件渲染更有效，尚无任何通用论据。

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

在第一种情况下，您向组件引入内部状态时，您需要将回调传递给想要更改当前视图的任何子级，没有明确的方法来处理分层路由，在这种情况下，您会遇到意外的{ {1}}值由您来处理，可以说后面的示例更容易阅读。另一方面，使用React Router库可以使第一个示例更明显，并且更具灵活性。与任何其他操作一样，您需要权衡要解决的问题。

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

React Router VS条件渲染

1 个答案: