Как стать автором
Обновить
133.83
Домклик
Место силы

Основные изменения React 18

Время на прочтение 4 мин
Количество просмотров 14K

Привет, меня зовут Кристина, я фронтенд-разработчик в Домклик. Хочу рассказать немного про основные изменения React 18.

Что нового:

  • Новые возможности (useId, useDeferredValue, useSyncExternalStore, useInsertionEffect).

  • Переходы (startTransition, useTransition).

  • Suspense на сервере.

Улучшено:

  • Конкурентный рендеринг.

  • Автоматический батчинг.

Устарело:

  • ReactDOM.renderReactDOM.createRoot

  • ReactDOM.hydrateReactDOM.hydrateRoot

  • ReactDOM.unmountComponentAtNode

  • ReactDOM.renderSubtreeIntoContainer

  • ReactDOMServer.renderToNodeStream

Как обновиться?

  1. npm install react react-dom или yarn add react react-dom.

  2. Так как ReactDOM.render устарел, необходимо с помощью ReactDOM.createRoot создать root и отрендерить, применяя его. Без этого новые возможности React 18 будут недоступны.

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

const root = ReactDOM.createRoot(container);

root.render(<App />);

Конкурентный рендеринг (Concurrency)

Что такое конкурентность? Например, вам нужно позвонить Алисе и Бобу. В неконкурентном режиме вы сначала позвоните Алисе, и только после завершения разговора с ней позвоните Бобу. Если разговоры короткие, то всё в порядке, но если разговор с Алисой задержался, например из-за проблем на линии, то это может стать потерей времени.

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

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

Автоматический батчинг (Automatic batching)

Что такое батчинг? Предлагаю рассмотреть ещё один пример из жизни. Допустим, вы решили приготовить салат. Составили список всех продуктов, которые вам нужно купить, идёте в магазин и покупаете всё за один раз — это батчинг.

Без батчинга вы начинаете готовить, потом оказывается, что у вас нет огурцов для салата, вы идёте в магазин, покупаете огурцы, возвращаетесь и продолжаете готовить, затем вы обнаруживаете, что у вас нет помидоров, вы идёте в магазин и… в этот момент вы уже выполнили свою дневную норму на фитнес-браслете.

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

setIsLoaded(true);
setError(true);
setModalStatus(‘error’);

В этом коде React будет заново рендерить после каждого из вызовов, но это не эффективно. Было бы лучше сначала записать все обновления состояния, а затем после них один раз отрендерить. Но как React может понять, что вы закончили обновлять состояния? А понять он может, например, с помощью обработчика событий:

// Такое поведение в React 17 и в React 18
function handleClick() {
  setIsLoaded(true);
  setError(true);
  setModalStatus(‘error’);
}

Повторный рендеринг произойдёт после того, как будет выполнена функция.

Рассмотрим ещё один пример:

setTimeout(() => {
  setIsLoaded(true);
  setError(true);
  setModalStatus(‘error’);
}, 1000);

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

Переходы (Transitions)

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

Обновления можно пометить как несрочные с помощью startTransition:

import { startTransition } from 'react';

// Срочное обновление значения инпута
setInputValue(value);

// Несрочное обновления запроса поиска
startTransition(() => {
  setSearchValue(value);
});

В чём отличие от setTimeout?

  1. setTimeout имеет задержку в выполнении, а задержка startTransition зависит от устройства, на котором выполняется, и других срочных рендерингов.

  2. Обновления startTransition могут быть прерваны.

  3. Со startTransition можно отслеживать состояния ожидания с помощью нового хука useTransition.

function Counter() {
  // Состояние ожидания
  const [isPending, startTransition] = useTransition();
  const [value, setValue] = useState(0);
  
  const handleClick = () => {
    startTransition(() => {
      setValue(c => c + 1);
    })
  }

  return (
    <>
      { isPending && <Loader /> }
      <button onClick={ handleClick }>{ value }</button>
    </>
  );
}

Suspense

В React 18 эта технология была архитектурно улучшена. Изменён рендеринг дочерних компонентов внутри Suspense. Также теперь есть возможность использования Suspense на сервере. Но что же это такое?

Представьте себе компонент, которому нужно выполнить асинхронную задачу, например, получение данных, прежде чем он сможет что-то отрендерить. Без Suspense такой компонент сохранял бы флаг isFetching/isLoading и в зависимости от него рендерил бы загрузчик, или скелет, или что-то ещё. А теперь с помощью Suspense компонент может дать понять, что он ещё «не готов», и приостановить рендеринг. В это время React пойдёт вверх по дереву до ближайшего Suspense, в котором будет установлен fallback, так называемый запасной вариант, который будет отображаться, пока компонент не будет «готов».

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

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

Пожалуй это всё о чем я хотела рассказать в этой статье. Любые изменения ведут к новым возможностям. Удачи в обновлении!

Теги:
Хабы:
+31
Комментарии 9
Комментарии Комментарии 9

Публикации

Информация

Сайт
domclick.ru
Дата регистрации
Дата основания
Численность
501–1 000 человек
Местоположение
Россия
Представитель
Евгения Макарова