Думаете о том, чтобы попробовать программировать с помощью React? Вот ключевые новые функции, которые стоит попробовать в React 18.

React — очень популярная библиотека JavaScript с открытым исходным кодом, созданная Facebook в 2013 году. Благодаря его гибкости многие разработчики используют некоторые из его функций для создания быстрых, эффективных и многоразовых компонентов пользовательского интерфейса (UI).

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

Новые возможности в React 18

React 18 состоит из нескольких полезных новых функций, добавленных в библиотека JavaScript с открытым исходным кодом. Многих из этих изменений не было в предыдущей версии, в то время как другие функции были улучшены. Некоторые из этих функций включают в себя; новый корневой API, автоматическая пакетная обработка, Transition API, Suspense API и выпуск новых хуков.

Новый корневой API

instagram viewer

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

Однако React 18 поставляется с новым корневым API, который создает корень, используя createRoot метод, а затем визуализирует компонент React в созданный корень, используя метод оказывать метод.

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

Фрагмент ниже показывает, как корневой API структурирован как в устаревшем, так и в новом виде.

Устаревший корневой API

Импортировать РеактДОМ от'реагировать-дом';
Импортировать Приложение от'./Приложение';
ReactDOM.render(<Приложение />, документ.getElementById('приложение'))

Новый корневой API

Импортировать РеактДОМ от'реакция-дом/клиент';
Импортировать Приложение от'./Приложение';
константа корень = ReactDOM.createRoot(документ.getElementById('приложение'));
корень.рендер(<Приложение />)

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

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

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

Импортировать { флешсинк } от'реагировать-дом';
функцияручкаклик() {
 флешсинк(() => {
 установитьКоличество(считать => количество + 1);
]});
 флешсинк(() => {
 сетсторе(магазин => !магазин);
});
}

API перехода

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

Теперь, если такие обновления происходят одновременно, это можно назвать тяжелой операцией и может привести к зависанию вашего приложения. Чтобы решить эту проблему, здесь переходный API вызывает startTransition приходит играть. Эта новая функция сообщает React, какие обновления следует помечать как «переходы», что, в свою очередь, улучшает взаимодействие с пользователем. Вот пример кода того, как это работает;

Импортировать { начало перехода } от"реагировать";
начальный переход(() => {
 setSearch (ввод);
});

саспенс

Когда приложение обрабатывается на сервере, в браузер возвращается статический HTML-файл, позволяющий пользователю увидеть, как выглядит приложение во время загрузки JavaScript. Когда файл загружается, HTML становится динамическим с тем, что известно как увлажнение. Недостаток здесь в том, что если всего этого нет, ваше приложение не станет интерактивным.

Чтобы решить эту проблему, React 18 предоставляет две новые функции рендеринга на стороне сервера (SSR), использующие саспенс компонент;

  • Потоковая передача HTML позволяет отправлять части компонента по мере их рендеринга.
  • Выборочная гидратация отдает приоритет интерактивности компонентов, выбранных пользователем.

Новые крючки

Одним из больших поворотных моментов для React стало введение хуки в React версия 16, которая позволяет функциональным компонентам получать доступ к состояниям и другим функциям React без написания классов. React 18 поставляется с пятью новыми хуками для улучшения опыта разработчиков;

  • useId: Этот хук позволяет нам создать уникальный идентификатор (ID) в нашем приложении как на сервере, так и на клиенте.
  • useTransition: используется вместе с startTransition для создания нового обновления состояния, которое можно назвать несрочным.
  • useDefferedValue: позволяет откладывать менее срочные обновления.
  • useSyncExternalStore: этот хук полезен при реализации подписок на внешние источники данных.
  • useInsertionEffect: этот хук ограничен авторами библиотек CSS-in-JS для внедрения стилей в DOM.

Как обновить до React 18

Чтобы выполнить обновление, можно использовать менеджер пакетов npm или yarn, выполнив следующую команду в терминале.

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

или

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

Затем вам нужно будет внести изменения в index.js файл в корневом каталоге папки проекта из устаревшего API в новый корневой API, как показано ранее.

Как настроить новый проект React 18

Чтобы настроить новый проект React 18, пакет create-react-app устанавливается с помощью npm или yarn в терминале;

npx создавать-реагировать-приложение мое-реагировать-приложение

или

пряжа добавить создавать-реагировать-приложение мое-реагировать-приложение

Улучшите производительность вашего приложения с помощью React 18

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

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