Несколько месяцев назад наконец-то был выпущен долгожданный React v18. Хотя серьезных изменений не произошло, были добавлены некоторые интересные функции, на которые стоит обратить внимание. В этой статье мы расскажем о некоторых новых дополнениях и о том, как перейти на React v18.

Как перейти на React 18

Чтобы установить последнюю версию React, выполните эту команду в терминале:

нпм установить реагировать

Или, если вы используете пряжу:

пряжа добавить

Установив последнюю версию, вы можете начать пользоваться ее новыми функциями.

В React 18 есть несколько дополнений; Вот четыре наиболее примечательных из них.

1. Строгий режим

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

Вы можете включить строгий режим для любой части вашего приложения. Например, вы можете включить его для всех ваших компонентов или только для некоторых из них.

импорт Реагировать из 'реагировать';
функцияДемоПример() {
возвращаться (
<див>
<ПервыйКомпонент />
<Реагировать. Строгий режим>
<Второй компонент />
<Третий компонент />
</React.StrictMode>
<Четвертый компонент />
</div>
 );
}

В приведенном выше коде все четыре компонента будут проверены на наличие потенциальных проблем. Однако проверки строгого режима будут применяться только к а также .

StrictMode также помогает другими способами, такими как:

  • Выявление компонентов с небезопасным жизненным циклом: Если компонент имеет метод жизненного цикла, помеченный как небезопасный, строгий режим предупредит вас об этом.
  • Предупреждение об использовании устаревшего API ссылки на строку: Если вы используете устаревший API ссылки на строку, строгий режим предупредит вас о его использовании.
  • Предупреждение об устаревшем использовании findDOMNode: Если вы используете устаревший API findDOMNode, строгий режим предупредит вас об этом.
  • Обнаружение неожиданных побочных эффектов: Если компонент запускает побочные эффекты (например, setState) в неожиданных местах, строгий режим предупредит вас об этом.
  • Обнаружение API устаревшего контекста: Если вы используете устаревший контекстный API (который сейчас устарел), строгий режим предупредит вас об этом.
  • Обеспечение повторно используемого состояния: Если у вас есть состояние, которое используется несколькими компонентами, строгий режим поможет обеспечить его правильную синхронизацию.

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

2. Переходы

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

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

Вы можете использовать функцию startTransition, чтобы пометить обновление пользовательского интерфейса как переход. Вот пример:

импорт { начало перехода } из 'реагировать';
начальный переход (() => {
// Отмечаем любые несрочные обновления состояния внутри как переходы
});

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

3. Автоматическое дозирование

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

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

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

4. Новые крючки

Версия 18 вводит много новых Реагировать на хуки, включая useId, useTransition и useDeferredValue. Эти новые хуки предоставляют отличный способ добавить дополнительные функции в ваши приложения React с минимальными усилиями.

React 18 обеспечивает повышенную производительность приложений

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