Изменение компонента корневого уровня вызывает повторный рендеринг дочернего компонента маршрута

Question

У меня есть основной компонент, который отображается на маршруте "/" (который настроен на index.js).В приложении есть общая панель поиска, которая отображается над / вне его собственных дочерних маршрутов.По сути, я хочу, чтобы эта панель поиска была общей для всего приложения.Панель поиска обновляет свойство в состоянии приложения при каждом изменении.Он работает нормально на всех маршрутах, за исключением того факта, что каждый раз, когда я вписываю строку поиска в дочерний маршрут, приложение вместе с текущим дочерним компонентом маршрута перерисовывается.Как я могу предотвратить этот повторный рендеринг, так как в нем нет изменений реквизита и нет необходимости повторного рендеринга дочернего компонента?

// App.js
render()
...
    <SearchBar
      className={classes.searchbar}
      value={(this.state.query && decodeURI(this.state.query)) || ''}
      onChange={this.handleQueryChange}
      inputRef={(el) => el && el.focus()}
      onRequestSearch={this.handleSearch}
      style={{
        margin: '0 auto',
        maxWidth: 800
      }}
    />
...
            <Route
              path="/:projectName/admin"
              render={(props) => (
                <Admin
                  {...commonProps}
                  handleError={this.handleError}
                  updateIsLoadingResults={this.updateIsLoadingResults}
                />
              )}
            />

Answer 1

React не знает, что компоненту не нужно повторно отображать дочерний компонент при изменении состояния.Вместо этого он ошибается из-за осторожности и перерисовывает все, что находится ниже компонента, где произошло изменение состояния.Чтобы сообщить React, что ваш компонент не должен повторно выполнять рендеринг, когда это происходит, вы должны использовать shouldComponentUpdate или React.PureComponent .PureComponent полезно, если вы управляете своим состоянием / поддерживает неизменный путь, тогда как shouldComponentUpdate допускает более настраиваемую логику.

Я бы рекомендовал сравнивать различные методы и использовать эти оптимизации только в том случае, если вы видите измеримую разницув исполнении.React обычно довольно быстр при рендеринге и фактически не меняет DOM, если в этом нет необходимости.Если ваши render функции работают медленно, я бы порекомендовал изучить, что делает их медленными и оптимизировать их.

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