Рубрики
Без рубрики

Оптимизация может преодолеть производительность (реагировать)

𝗝𝘂𝗻𝗶𝗼𝗿 𝗗𝗲𝘃: 𝗪𝗲 𝘀𝗵𝗼𝘂𝗹𝗱 𝘄𝗿𝗮𝗽 𝗲𝘃𝗲𝗿𝘆 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻𝘀𝗶𝗱𝗲 “𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸” 𝗵𝗼𝗼𝗸 𝘁𝗼 𝗯𝗼𝗼𝘀𝘁 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲. 𝗦𝗲𝗻𝗶𝗼𝗿 … Теги с реакцией, JavaScript, WebDev.

𝗝𝘂𝗻𝗶𝗼𝗿 𝗗𝗲𝘃: 𝗪𝗲 𝘀𝗵𝗼𝘂𝗹𝗱 𝘄𝗿𝗮𝗽 𝗲𝘃𝗲𝗿𝘆 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻𝘀𝗶𝗱𝗲 “𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸” 𝗵𝗼𝗼𝗸 𝘁𝗼 𝗯𝗼𝗼𝘀𝘁 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲.

𝗦𝗲𝗻𝗶𝗼𝗿 𝗗𝗲𝘃: 𝗦𝗲𝗿𝗶𝗼𝘂𝘀𝗹𝘆 (𝘄/𝘁 𝗰𝗵𝗲𝗰𝗸𝗶𝗻𝗴 𝗽𝗿𝗼𝗳𝗶𝗹𝗶𝗻𝗴)? 𝗜 𝘁𝗵𝗶𝗻𝗸 𝗶𝘁 𝘄𝗶𝗹𝗹 𝗯𝗲 𝗮 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗸𝗶𝗹𝗹!

^ ^ В продолжении до последнего поста (Rect.Memo):

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

Оформить заказ видео для более подробной информации: https://youtu.be/5aH_b5pUAHI

<𝗕𝗶𝗴𝗟𝗶𝘀𝘁 𝗶𝘁𝗲𝗺𝘀 = {𝗶𝘁𝗲𝗺𝘀} 𝗶𝘁𝗲𝗺𝗖𝗹𝗶𝗰𝗸 = {𝗶𝘁𝗲𝗺𝗖𝗹𝗶𝗰𝗸}/>

В вышеуказанной линии, даже если передается через rance.memo, он все равно будет перенесен, потому что функция itemClick будет восстанавливаться каждый раз, когда родительский компонент отображается.

𝗜 𝗵𝗮𝘃𝗲𝗻’𝘁 𝗰𝗵𝗮𝗻𝗴𝗲𝗱 𝘁𝗵𝗲 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻, 𝗯𝘂𝘁 𝘄𝗵𝘆 𝘄𝗶𝗹𝗹 𝗶𝘁 𝘀𝘁𝗶𝗹𝗹 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿?

Вот как работает JavaScript, вы должны знать, что две ссылки никогда не равны.

[1,2] === [1,2]//false//true (Примитивы равны)

Примитивные значения будут одинаковыми на каждом повторном визуализации, но объекты будут различными (функции – это объекты в JavaScript).

Чтобы предотвратить это, просто оберните свою функцию с помощью USECallback крючком.

𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 (𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻, [𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝗶𝗲𝘀])//Здесь мы говорим, чтобы использовать ту же функцию повторной рендеры//если Вы передаете массив зависимостей, затем всякий раз, когда любые изменения зависимостей будут использоваться новая функция.

𝗗𝗼𝗲𝘀 𝗶𝘁 𝗺𝗲𝗮𝗻 𝘁𝗵𝗮𝘁 𝗜 𝘀𝗵𝗼𝘂𝗹𝗱 𝘄𝗿𝗮𝗽 𝗲𝘃𝗲𝗿𝘆 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻𝘀𝗶𝗱𝗲 𝗶𝗻𝘀𝗶𝗱𝗲 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸?

Вы должны сделать это, вот причины:

  1. Оптимизация всегда приходит со стоимостью, это специальная функция, которая никогда не будет собранным мусором и всегда будет иметь ссылку в памяти.

  2. Дополнительная проверка для различных значений в массиве зависимостей, чтобы увидеть, изменяются ли эти зависимости, они должны воссоздать более новую функцию.

  3. Не забывайте, что USECallback () крючок вызывается каждый раз, когда родительский компонент оказывает. Даже USECallback () Возвращает тот же объект функции, тем не менее, встроенная функция повторно создана на каждом повторном рендеринге (USECallback () просто пропускает его).

𝗛𝗼𝘄 𝘁𝗼 𝗱𝗲𝗰𝗶𝗱𝗲 𝘄𝗵𝗲𝘁𝗵𝗲𝗿 𝘁𝗼 𝘂𝘀𝗲 𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 () 𝗼𝗿 𝗻𝗼𝘁?

Там никогда не будет ни одного ответа на эту проблему, поэтому всегда запустите свой профилировщик и посмотрите, какую прибыль производительности вы получите, а затем решите.

Оригинал: “https://dev.to/varunprashar5/react-optimisation-may-overkill-performance-11og”