Я знаю, что использование React.memo() для мемоизации компонентов/частей компонентов в целом является хорошей практикой, но я обнаружил, что мемоизирую каждое отдельное поле в формах, реализованных с помощью React Hook Form. Поскольку в RHF используются неконтролируемые компоненты, это не кажется проблемой: компоненты, похоже, обновляются просто отлично, и я действительно вижу улучшение производительности.

И все же мой инстинкт подсказывает мне, что мемоизация почти всего - это плохая практика. Так ли это плохо? Есть ли какой-то другой способ экономить на рендерах?

Jonathan Wilbur

Ответов: 2

Ответы (2)

Я бы сказал, что ДА, довольно избыточно мемоизировать все. Я бы рекомендовал использовать react profiler, чтобы узнать, какие компоненты нуждаются в мемоизации.

Я бы тоже сослался на этот ответ.

https://stackoverflow.com/a/54024157/7174241

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

Для более краткого объяснения:

React.memo() предотвращает излишнюю перерисовку путем сравнения предыдущего и текущего реквизитов компонента.


  

Нормально, когда родитель пересматривается, ребенок также пересматривается по умолчанию.

Если реквизиты, переданные в Child, не изменяются при перерисовке Parent, то Child не перерисуется, если вы используете React.memo() на Child

Здесь возникает вопрос: почему React знает, что props на Child не был изменен в текущей фазе рендеринга?

Ответ таков: React сам должен сделать сравнение, и это стоимость React.memo()

.

Если время сравнения > время простого рендеринга всего компонента Child, это даже замедляет время рендеринга.

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

2022 WebDevInsider