React Router VS Условный рендеринг

Question

Меня смущает различие в ядре (особенно в отношении производительности) между использованием React Router и обычным подходом условного рендеринга. То, что я имею в виду "обычный подход условного рендеринга", например:

мы можем установить состояние в родительском компоненте и передать его как реквизиты дочернего компонента, мы условно обновляем такое состояние в зависимости от требований, и дочерний компонент будет перерисовываться, поскольку различный контент зависит от его свойств.

Я думаю, что он может достичь той же цели, что и использование React Router, так зачем нам все еще нужен React Router? Использует ли реагирующий маршрутизатор гораздо более высокую производительность или что-то в этом роде (предположим, нам не нужна функция истории)?

Answer 1

Сам 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>
)

В первом случае, когда вы вводите внутреннее состояние в свой компонент, вам необходимо передать обратный вызов всем дочерним элементам, желающим изменить текущее представление, нет четкого способа обработки иерархической маршрутизации, случай, когда вы получаете неожиданное * Значение 1011 * зависит от вас, и, возможно, последний пример легче читать. С другой стороны, первый пример, возможно, более очевиден и несколько более гибок при использовании библиотеки React Router. Как и во всем, это компромисс, который вам нужно оценить в контексте проблемы, которую вы пытаетесь решить.

Кроме того, обычно требуется интегрировать определенные вещи с вашим представлением о логическом представлении, например, вы можете изменить URL-адрес браузера, сохранить историю просмотров или управлять своим текущим логическим представлением через контейнер состояний, и эти все части функциональности, которые React Router помогает облегчить