React.memo и withRouter

Question

Я хочу не перерисовывать свой компонент на определенных путях, пытаясь сделать это с помощью React.memo и проверяя текущий путь с помощью withRouter HOC.

Функция сравнения в React.memo не вызывается.

function compare(prevProps, nextProps) {
  console.log(prevProps,nextProps)
  return (prevProps.location.pathname !== '/' && nextProps.location.pathname !== '/')
}
export default React.memo( withRouter(MyComponent), compare);

Answer 1

Просто используйте это так

функция compare(prevProps, nextProps) { console.log(prevProps,nextProps) return (prevProps.location.pathname!== '/' && nextProps.location.pathname!== '/') } экспорт по умолчанию withRouter(React.memo(MyComponent, сравните));

Answer 2

Спасибо за ваш вопрос, он был очень полезен для меня два месяца назад.

функция принимает компонент и , который будет вызываться, чтобы решить, нужно ли React повторно отображать или нет, если функция возвращает trueкомпонент не будет повторно отображаться, в любом случае, если функция вернет falseтогда реквизит теперь другой, и React делает re-renderк вашему компоненту.

Теперь: чтобы получить доступ к pathnameправильно в переданном to then следует обернуть, а не наоборот, обернуть компонент (он не знает, запомнена ли его версия компонента или нет, он просто обертывает его) и передать ему реквизиты маршрутизации.

The functionпередается в качестве второго аргумента, теперь может получить доступ к previousа также newprops и выполните сравнение, как мы говорили ранее (где каждый props содержит полные детали маршрутизации, которые вы хотите).

      import { memo } from 'react';

function propsAreEqualBasedOnPathname(prevProps, nextProps) {
    return prevProps.location.pathname == nextProps.location.pathname;
}

withRouter(memo(MyComponent), propsAreEqualBasedOnPathname);

Наконец, обратите особое внимание на то, как сравнение выполняется внутри compare functionпотому что некоторые ошибки могут навсегда помешать повторному рендерингу вашего компонента в будущем.

я нашел с помощью memoс withRouterдействительно важно улучшить performanceкомпонентов React, особенно если компонент представляет собой страницу, полную деталей и логики выборки, которая может потребовать некоторого времени для рендеринга, поэтому каждый сохраненный вами повторный рендеринг увеличивает производительность вашей страницы .