31.07.2024 в 22:36

React 19: Что вам нужно знать?

Официально был выпущен React 19 25 апреля 2024 года. Если вам нравится работать с React, вы, должно быть, уже вникли в его детали, но если вы новичок в React, то, вероятно, вам есть на что посмотреть! Приятного чтения!

В любом случае, давайте углубимся в суть того, что вам нужно знать (нет никакого вреда в том, чтобы вернуться к тому, что вы уже знаете, верно?)

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

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

Ну, это проблема повторного рендеринга, которая также влияет на производительность. React 19 призван стать универсальным решением для этой проблемы. Как? Давай выясним.

React компилятор

React 19 представляет новый компилятор React. Раньше код React запускался только в браузере, но теперь этот компилятор преобразует код React в простой JavaScript. Благодаря этому ваше приложение запускается намного быстрее. Компилятор автоматически решает, когда обновлять пользовательский интерфейс, поэтому вам не нужно вручную использовать такие инструменты, как Memo() или Callback(). Этот компилятор уже используется в Instagram и скоро будет доступен с открытым исходным кодом.

Действия

Обработка форм в React 19 стала проще благодаря новой функции «Действия». Вместо использования событий onSubmit теперь вы можете использовать атрибут действия в тегах HTML-форм. Это позволяет отправлять формы на сервер, упрощая обработку данных.

До:

<form onSubmit={handleSubmit}>
  <input name="task" />
  <button type="submit">Add Task</button>
</form>

После:

"use server";

const addTask = async (formData) => {
  const newTask = {
    task: formData.get('task'),
  };
  console.log(newTask);
};

const TaskForm = () => {
  return (
    <form action={addTask}>
      <div>
        <label>Task</label>
        <input type="text" name="task" />
      </div>
      <button type="submit">Add Task</button>
    </form>
  );
};

export default TaskForm;

Раздел метаданных документа

В React 19 представлен <DocumentHead>, новая функция, которая позволяет легко добавлять заголовки и мета-теги на ваши веб-страницы. Это улучшает SEO и обеспечивает единообразие вашего бренда на разных страницах.

Веб-компоненты

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

Загрузка активов

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

Улучшенные крючки

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

Давайте подведем итоги. Оставайтесь с нами, следующая серия будет посвящена новым хукам в React 19 и тому, как их следует использовать.

Источник:

#JavaScript #React #Next.js

Войти на сайт