В этом месяце команда Whitespectre Frontend Team рассказывает о новейших функциях и хуках React 18 для оптимизации производительности, объекте Proxy в JavaScript и новой спецификации ECMAScript 2022.
командой инженеров Whitespectre
Оптимизация производительности в React 18
Это не первый раз, когда мы говорим о React 18, о готовых улучшениях производительности, которые он принес, и о том, что стало известно как новые параллельные функции. Но знаете ли вы, как использовать их, чтобы добиться максимальной производительности вашего приложения?
Двумя наиболее интересными параллельными функциями являются новые хуки useTransition()
и useDeferredValue()
, и вот как они помогают оптимизировать производительность:
По умолчанию React пытается выполнить рендеринг после обновления всех состояний, т. е. объединяет обновления, а затем рендерит пользовательский интерфейс сразу со всеми изменениями. Это желательное поведение в большинстве случаев, но когда некоторые из этих обновлений занимают намного больше времени, чем другие, они могут полностью блокировать отрисовку пользовательского интерфейса, даже если готовы более быстрые обновления.
С помощью useTransition()
вы можете установить приоритет срочных обновлений состояния над несрочными. Таким образом, React будет знать, что ему не следует ждать этих более медленных, несрочных обновлений, и немедленно отобразит срочные, а затем снова отрендерит их, когда закончатся более медленные обновления. Таким образом, пользовательский интерфейс не будет зависать из-за самых медленных операций, улучшая воспринимаемую отзывчивость приложения.
Этот хук выполняет ту же работу, что и 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, мы будем рады прочитать ваши отзывы!
И не пропустите наши предыдущие истории: