React router render prop всегда перерисовывает компоненты

Question

Я использую React Router, и поскольку функция, которая принимает компоненты, должна быть передана в маршрут, я выполняю рендеринг компонентов с помощью рендера.Однако передача маршрута в качестве реквизита рендеринга всегда приводит к повторному рендерингу компонента.Я перепробовал все возможные ловушки lifeCycle, такие как shouldComponentUpdate и ComponentDidUpdate, но ничто не мешает компоненту повторно выполнить рендеринг.Эта структура маршрута показана ниже:

Route1:

<Route
  path='/dashboard'
  render={() => dashboardOperator(<Dashboard />)}
/>

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

Route2:

 <Route
     path="/dashboard"
     component={DashboardComponent}
 />

Однако этот подход маршрутизации не эффективен, поскольку он не позволяет функции быть переданной в маршрут.

Поскольку перехватчики жизненного цикла, по-видимому, не эффективны в предотвращении повторного рендеринга компонента Route1 (подход поддержки рендеринга), как я могу использовать поддержку рендеринга (или другой подход), а также предотвратить ненужное повторное рендеринг компонентаделает

Answer 1

Попробуйте что-то вроде этого:

class App extends React.PureComponent {
  renderDashboardPage() {
    return dashboardOperator(<Dashboard />)
  }

  render() {
    return (
      <Route
        path='/dashboard'
        render={this.renderDashboardPage}
      />
    );
  }
}

Это должно работать, потому что ссылка на функцию / объект остается неизменной при повторном рендеринге, поэтому React поймет, что реквизиты не изменились.Хотя будьте осторожны с преждевременной оптимизацией