В этом месяце команда Whitespectre Frontend Team рассказывает о новейших функциях и хуках React 18 для оптимизации производительности, объекте Proxy в JavaScript и новой спецификации ECMAScript 2022.

командой инженеров Whitespectre

Оптимизация производительности в React 18

Это не первый раз, когда мы говорим о React 18, о готовых улучшениях производительности, которые он принес, и о том, что стало известно как новые параллельные функции. Но знаете ли вы, как использовать их, чтобы добиться максимальной производительности вашего приложения?

Двумя наиболее интересными параллельными функциями являются новые хуки useTransition() и useDeferredValue(), и вот как они помогают оптимизировать производительность:

использоватьПереход()

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

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

useDeferredValue()

Этот хук выполняет ту же работу, что и useTransition(), но используется, когда нам нужно только значение и нет функции установки состояния. Он сообщает React, что обновление состояния для этого значения не является срочным, поэтому он отложит более срочные обновления. Если происходит срочный рендеринг, компонент будет рендериться с предыдущим значением, а затем снова рендерится, когда происходит обновление фактического состояния.

Хотите знать больше? На dev.to написали интересную статью с примерами и более подробным объяснением этих фич, а также еще некоторые хитрости оптимизации с lazy() и <suspense> или со старыми добрыми хуками useMemo() и useCallback().

Помните, что для того, чтобы использовать новые параллельные функции, вы должны быть на React 18 и использовать новый Root API.

Прокси-объект JavaScript

Прокси-объект JavaScript оборачивает другой объект и перехватывает основные операции, такие как чтение/запись свойства или построение объекта, позволяя вам прозрачно обрабатывать их.

Это ни в коем случае не новая функция (она была у нас со времен ES6), но она не всегда хорошо известна, потому что нелегко найти варианты ее использования вне разработки библиотек, да и поддержка браузеров была не очень хорошей.

Теперь, когда он имеет широкую поддержку браузеров, самое время вспомнить, насколько хороши прокси. Если вы хотите узнать о них больше, на dev.to недавно написали пару статей:

ECMAScript 2022

ECMAScript (или ES) — это стандарт, регулирующий язык, известный нам как JavaScript. Он опубликован некоммерческой организацией по стандартизации Ecma International, и они только что утвердили последнюю версию спецификации: ECMAScript 2022 или ES13. Вот новые функции, которые он включает:

  • Публичные, частные и статические члены класса
  • Частные чеки участников с оператором in
  • Статические блоки инициализации
  • Ожидание верхнего уровня в модулях
  • Ссылка error.cause в классе Error
  • Метод at() для индексируемых значений (таких как массивы или строки)
  • Индексы соответствия RegExp
  • Object.hasOwn(obj, propKey)

К счастью, в настоящее время браузеры довольно быстро догоняют стандарты, и многие из этих новых функций уже имеют более 90% поддержки по сравнению с глобальной долей браузеров. Но в любом случае, вы можете начать использовать их уже сегодня с транспиляторами типа Babel и полифилами core-js.

Если вы хотите узнать больше о каждом из них, Аксель Раушмайер написал пост в своем блоге с большим количеством примеров. Проверь!

Что бы вы хотели добавить? Думаете, чего-то не хватает? Пишите нам в @whitespectrehq или LinkedIn, мы будем рады прочитать ваши отзывы!

И не пропустите наши предыдущие истории: