06.12.2024 в 08:40

React 19: Новые возможности и обновление

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

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

Действия и асинхронные переходы

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

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

Оптимистичные обновления с useOptimistic

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

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <input type="text" name="name" />
    </form>
  );
}

Улучшенный API

Более гибкое создание компонентов за счет условной отрисовки на основе промисов и контекстов.

import { use } from 'react';
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

Управление метаданными

React 19 поддерживает непосредственную отрисовку тегов <title>, <meta>, и <link> в компонентах, автоматически перемещая их в <head>.

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="author" content="Author Name" />
    </article>
  );
}

Управление стилями и скриптами

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

<link rel="stylesheet" href="styles.css" precedence="default" />
<script async src="script.js"></script>

Серверные компоненты и действия

Стабильная поддержка серверных компонентов и Server Actions (use server) позволяет вызывать асинхронные функции на сервере из клиентских компонентов без лишних сложностей.

Обработка ошибок

Улучшенный механизм обработки ошибок с более информативными сообщениями и API для тонкой настройки (onCaughtError, onUncaughtError, onRecoverableError).

Работа с ref

Компоненты-функции теперь могут принимать ref как свойство, упрощая код и устраняя необходимость в forwardRef.

Гидратация и совместимость

Улучшенная гидратация, корректно обрабатывающая элементы, добавленные расширениями браузера или сторонними скриптами.

Предварительная загрузка ресурсов

Оптимизация производительности с помощью API предварительной загрузки (preload, preinit).

import { preload, preinit } from 'react-dom';
preinit('script.js', { as: 'script' });
preload('font.woff', { as: 'font' });

Обновление до React 19

Подробная инструкция по обновлению доступна по адресу https://react.dev/blog/2024/12/05/react-19 . Обратите внимание на критические изменения, протестируйте совместимость вашего приложения и обновите зависимости, использующие React.

Установка:

npm install react@19 react-dom@19

Более подробная информация и примеры использования новых возможностей доступны в официальной документацииhttps://react.dev/blog/2024/12/05/react-19.

React 19 предлагает значительные улучшения для создания высокопроизводительных и надежных приложений. Начните использовать его сегодня!

Источник:

Copy link

#JavaScript #React

Войти на сайт