Должен ли я обернуть все мои компоненты React.memo (), если он не ожидает каких-либо свойств?
Хотя очевидно, почему 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
в компоненте, не получая никаких реквизитов?
Ответы
Я бы сказал, что вам следует подумать об использовании React.memo
для тех дочерних компонентов, которые не принимают никаких реквизитов. Я очень рекомендую эту статью:https://dmitripavlutin.com/use-react-memo-wisely/
2.1 Компонент отрисовывается часто с одними и теми же реквизитами
. Наилучший случай обертывания компонента в React.memo () - это когда вы ожидаете, что функциональный компонент будет рендерить часто и обычно с одними и теми же реквизитами.
Поскольку компоненты, о которых вы спрашиваете, не принимают никаких реквизитов, это означает, что реквизиты никогда не изменятся. Следовательно, само собой разумеется, что использование React.memo
может избежать циклов рендеринга. Обратите внимание на это важное предостережение из той же статьи:
5. React.memo () - подсказка производительности
Строго говоря , React использует мемоизацию как подсказку производительности.Хотя в большинстве ситуаций React избегает рендеринга мемоизированного компонента, вы не должны рассчитывать на это, чтобы предотвратить рендеринг.