Должен ли я обернуть все мои компоненты React.memo (), если он не ожидает каких-либо свойств?

Aug 18 2020

Хотя очевидно, почему Reactне выполняет React.memo для всех своих функциональных компонентов по умолчанию, и мы должны сами оборачивать наши функциональные компоненты по мере необходимости.

В моем случае у меня есть большой проект React с такой структурой:

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

Вся моя бизнес-логика находится внутри redux, а компоненты используются useSelectorвнутри для получения данных из магазина.

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

Раньше connectмы автоматически получали мемоизированный компонент, который сравнивал настраиваемые реквизиты и сохраненное значение, переданное как реквизиты компоненту, так что теперь должны ли мы всегда делать это вручную React.memoпри использовании useSelectorв компоненте, не получая никаких реквизитов?

Ответы

1 BryanDowning Aug 18 2020 at 06:08

Я бы сказал, что вам следует подумать об использовании React.memoдля тех дочерних компонентов, которые не принимают никаких реквизитов. Я очень рекомендую эту статью:https://dmitripavlutin.com/use-react-memo-wisely/

2.1 Компонент отрисовывается часто с одними и теми же реквизитами
. Наилучший случай обертывания компонента в React.memo () - это когда вы ожидаете, что функциональный компонент будет рендерить часто и обычно с одними и теми же реквизитами.

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

5. React.memo () - подсказка производительности
Строго говоря , React использует мемоизацию как подсказку производительности.

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