Почему реагирующие элементы вне Route перерисовывают? - PullRequest
Новая
       8

Почему реагирующие элементы вне Route перерисовывают?

0 голосов
/ 12 июня 2018

Откройте пример боковой панели в официальных документах реагирующего маршрутизатора.Вы можете видеть, что ul отображается без Route, так как он должен быть там на экране независимо от URL.Откройте React DevTools, установите флажок Highlight updates и щелкните любой из пунктов меню на боковой панели.Вы заметите, что элементы в ul перерисовываются при каждом клике.На мой взгляд, это не нормальное поведение, элементы реагирования в ul не должны повторно отображаться при изменении маршрута, поскольку они не отображаются компонентом реагирующих маршрутизаторов Route.Есть ли способ, которым я могу остановить их повторный рендеринг?

1 Ответ

0 голосов
/ 12 июня 2018

Компонент Маршрутизатор зависит от контекста для изменения, и всякий раз, когда значение контекста обновляется, он запускает повторный рендеринг дочерних элементов для сопоставления и рендеринга соответствующего маршрута.Теперь, поскольку ul element записывается непосредственно как child of Router, он также перерисовывается.Несмотря на то, что реагирует на сравнение виртуальных доменов, и DOM не будет повторно отображаться, вы можете избежать этого, используя PureComponent и записывая в него элементы ul Component

const SidebarExample = () => (
  <Router>
    <div style={{ display: "flex" }}>
      <div
        style={{
          padding: "10px",
          width: "40%",
          background: "#f0f0f0"
        }}
      >
        <Route component={Elements}/>
        {routes.map((route, index) => (
          // You can render a <Route> in as many places
          // as you want in your app. It will render along
          // with any other <Route>s that also match the URL.
          // So, a sidebar or breadcrumbs or anything else
          // that requires you to render multiple things
          // in multiple places at the same URL is nothing
          // more than multiple <Route>s.
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.sidebar}
          />
        ))}
      </div>

      <div style={{ flex: 1, padding: "10px" }}>
        {routes.map((route, index) => (
          // Render more <Route>s with the same paths as
          // above, but different components this time.
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.main}
          />
        ))}
      </div>
    </div>
  </Router>

)

class Elements extends React.PureComponent {
    render() {
        return (
          <ul style={{ listStyleType: "none", padding: 0 }}>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/bubblegum">Bubblegum</Link>
            </li>
            <li>
              <Link to="/shoelaces">Shoelaces</Link>
            </li>
          </ul>
        )
    }
}
...